Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to solve the problem of HTML5 Custom attribute

2025-02-24 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "HTML5 custom attribute problem how to solve", the content is detailed, the steps are clear, the details are handled properly, I hope this "HTML5 custom attribute problem how to solve" article can help you solve doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

Problem background

We often use the method of data-id= "1" in passing values between pages and js, and then get the value of id through e.target.dataset.id

I can't get the value when I get it today.

Analysis of problems

Later, it was found that the e object had currentTarget and target properties, and dataset was in currentTarget, so the correct value was taken through e.currentTarget.dataset.id.

In addition, data-id= "1" had better not be named after the hump, such as: data-Id= "1", so that sometimes you can't get a value.

HTML5 Custom Properties

The definition of attributes starting with data- is often seen in websites. Although W3C does not recognize it, the latest HTML5 stipulates that data- is reasonable. In HTML5, anything that starts with data- is a custom attribute. It is usually used to implement some elements that are not clearly defined in HTML and apply user-defined attributes to the code.

WeChat Mini Programs document

What is an event?

Events are the mode of communication from the view layer to the logical layer.

Events can feed back the user's behavior to the logical layer for processing.

The event can be bound to the component, and when the trigger event is reached, the corresponding event handling function in the logic layer will be executed.

Event objects can carry additional information, such as id, dataset, touches.

How events are used

Bind an event handler in the component.

For example, bindtap, when the user clicks on the component, it will find the corresponding event handler in the corresponding Page of the page.

Click me!

Write the corresponding event handler in the corresponding Page definition, and the argument is event.

Page ({tapName: function (event) {console.log (event)}})

You can see that the message from log is roughly as follows:

{"type": "tap", "timeStamp": 895, "target": {"id": "tapTest", "dataset": {"hi": "WeChat"}}, "currentTarget": {"id": "tapTest", "dataset": {"hi": "WeChat"}}, "detail": {"x": 53, "y": 14} "touches": [{"identifier": 0, "pageX": 53, "pageY": 14, "clientX": 53, "clientY": 14}], "changedTouches": [{"identifier": 0, "pageX": 53, "pageY": 14, "clientX": 53, "clientY": 14}]}

Respond to events using the WXS function

Read here, this article "how to solve the HTML5 custom attribute problem" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more about the article, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report