HTML5自定义属性的问题分析


Posted in HTML / CSS onAugust 16, 2019

问题背景

在页面与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自定义属性的问题分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
利用CSS3实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
Mar 10 HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
Aug 31 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
Html5 localStorage入门教程
Apr 26 HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 HTML / CSS
HTML5的postMessage的使用手册
Dec 19 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
Jul 01 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 #HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 #HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 #HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 #HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 #HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 #HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 #HTML / CSS
You might like
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
scrapy爬虫完整实例
2018/01/25 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
普通院校学生的自荐信
2013/11/27 职场文书
《称象》教学反思
2014/04/25 职场文书
查摆问题整改措施
2014/10/24 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript