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的CSS 多栏(Multi-column)实现瀑布流源码分享
Jun 11 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
canvas探照灯效果的示例代码
Nov 30 HTML / CSS
html5 制作地图当前定位箭头的方法示例
Jan 10 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
Jul 01 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 HTML / CSS
聊聊CSS粘性定位sticky案例解析
Jun 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
php cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
node中的session的具体使用
2018/09/14 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
详解python的几种标准输出重定向方式
2016/08/15 Python
Python迭代和迭代器详解
2016/11/10 Python
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
2014年服务员个人工作总结
2014/12/23 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
创业计划书之餐饮
2019/09/02 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python