問題背景

在頁面與js傳值中我們經常用到data-id="1"的方式，然后通過e.target.dataset.id取id的值

今天在獲取值時怎么也取不到

問題分析

后來發現e對象有currentTarget和target屬性，而dataset就在currentTarget中，所以通過e.currentTarget.dataset.id取到了正確的值。

另外data-id="1"最好不要用駝峰命名如：data-Id="1" ，這樣有時候也取不到值。

HTML5 自定義屬性

網站中經常會看到以data-開頭的屬性定義,雖然W3C不認定,但最新HTML5規定data-是合理的,在HTML5中,任何以data-開始的都是自定義屬性,通常它用來實現一些HTML里沒有明確定義的元素,把用戶自定義的屬性應用到代碼中

微信小程序文檔

什么是事件

事件是視圖層到邏輯層的通訊方式。

事件可以將用戶的行為反饋到邏輯層進行處理。

事件可以綁定在組件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。

事件對象可以攜帶額外信息，如 id, dataset, touches。

事件的使用方式

在組件中綁定一個事件處理函數。

如bindtap，當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

在相應的Page定義中寫上相應的事件處理函數，參數是event。

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

可以看到log出來的信息大致如下：

{  "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  }]}

使用WXS函數響應事件

總結

以上所述是小編給大家介紹的HTML5自定義屬性的問題分析,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！