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 iphone玻璃透明气泡完美实现
Mar 20 HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
Apr 02 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 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冒泡排序算法代码详细解读
2011/07/17 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
js获取域名的方法
2015/01/27 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
jQuery设计思想
2017/03/07 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
如何基于python实现不邻接植花
2020/05/01 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
建筑专业自我鉴定
2013/10/22 职场文书
初中学习计划书范文
2014/09/15 职场文书
客服专员岗位职责
2015/02/10 职场文书
百家讲坛观后感
2015/06/12 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
股东协议书范本2016
2016/03/21 职场文书
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers