• 微信小程序:bindtap等事件传参


    事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 
    事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。 
    事件对象可以携带额外信息,如 id, dataset, touches。

    详解(以常见的tap点击事情为例)

    wxml

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

    JS

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

    event 打印结果

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

    注意两点:

    1、data-名称 不能有大写字母,如果需要,可以通过 - (中划线)来连接单词,编译的时候小程序会将第二个单词首字母自动大写。图中代码是为了自己标志,所以第二个单词的首字母大写了,其实可以不用。data-* 属性中不可以存放对象。

    2、注意打印结果中target和currentTarget的区别。

    target 触发事件的源组件。 
    currentTarget 事件绑定的当前组件。

    如果你在父容器上绑定了事件并传参,当你点击父容器时,事件绑定的组件和触发事件的源组件是同一个元素,所以currentTarget 、target 都可以拿到参数,但是当你点击子元素时,target 就不是事件绑定的组件了,所以拿不到参数。 
    由于事件冒泡的机制,父容器上绑定的事件依然可以触发,所以currentTarget 依然可以拿到参数。

    说明

    id传参和dataset类似,只是最后获取值的时候不同。event.currentTarget.id

  • 相关阅读:
    I.MX6 Parallel RGB LCD Datasheet描述
    ubuntu IP 扫描
    I.MX6 按键开关机 PMIC 检测
    java中对List中对象排序实现
    jQuery实现父窗口的问题
    如何在Oracle中复制表结构和表数据
    handsontable常规配置的中文API
    oracle中to_date详细用法示例(oracle日期格式转换)
    js中子页面父页面方法和变量相互调用
    关于Ajax的type为post提交方式出现请求失效问题
  • 原文地址:https://www.cnblogs.com/xiangzhong/p/9119856.html
Copyright © 2020-2023  润新知