美文网首页
小程序点击事件传自定义参数数据

小程序点击事件传自定义参数数据

作者: 徐弱西 | 来源:发表于2019-08-27 16:24 被阅读0次

    小程序点击事件会传递一个事件对象,js中参数接受。

    <button bind:tap="test">111111111111</button>
    

    这个对象结构:


    image.png

    currentTarget 事件属性返回其监听器触发事件的节点,即当前处理该事件的元素、文档或窗口。我们怎么在标签中加入自定义的属性参数就可以加在currentTarget和Target对象中,但是不能乱加,例如:

    <button bind:tap="test" aaaaaa="哈哈哈哈哈哈">111111111111</button>
    

    观察打印结果发现currentTarget和Target对象中没有我们自定义的aaaaaa="哈哈哈哈哈哈"


    image.png

    要有规范的格式:data-XXXX!
    我们把自定义属性用data-XXXX的方式添加

    <button bind:tap="test" data-aaaaaa="哈哈哈哈哈哈">111111111111</button>
    

    注意命名,标签属性不区分大小写,大写字母都被转化为小写
    例如 data-Type='哈哈哈哈',传给js就会变成type:'哈哈哈哈'

    再来看打印结果:

    image.png

    可以发现在currentTarget和Target中发现多了一个dataset属性,也是个对象
    里面包含了我们自定义的 aaaaaa="哈哈哈哈哈" , 这样就能传递我们想要传递的参数了!
    怎么拿到呢?直接拿就行了

    test:function(e){
          console.log(e)
          console.log("currentTarget:",e.currentTarget.dataset.aaaaaa)
          console.log("target:",e.target.dataset.aaaaaa)
      },
    

    打印结果:


    image.png

    相关文章

      网友评论

          本文标题:小程序点击事件传自定义参数数据

          本文链接:https://www.haomeiwen.com/subject/hdbeectx.html