本文将带你了解微信小程序开发之--鼠标事件 & 点击事件返回值的target分析，希望本文对大家学微信有所帮助。

小程序鼠标事件" style="margin: 0.8em 0px; padding: 0px; box-sizing:   border-box; font-weight: 100; line-height: 1.3em; font-size: 2.6em; color:   rgb(63, 63, 63); font-family: 'microsoft yahei'; background-color: rgb(255,   255, 255);">微信小程序鼠标事件事件分类事件分为冒泡事件和非冒泡事件： 1. 冒泡事件(bind)：当一个组件上的事件被触发后，该事件会向父节点传递。 2. 非冒泡事件(catch)：当一个组件上的事件被触发后，该事件不会向父节点传递。 bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。WXML的冒泡事件列表类型触发条件touchstart手指触摸动作开始touchmove手指触摸后移动touchcancel手指触摸动作被打断，如来电提醒，弹窗touchend手指触摸动作结束tap手指触摸后马上离开longtap手指触摸后，超过350ms再离开冒泡讲解
    outer view
   
        middle view
       
            inner view
        view>
    view>
    view>123456789123456789点击inner view后只触发handleTap3，然后再触发handleTap2.不触发handleTap1。 因为handleTap2中的绑定类型是catch，阻止了冒泡事件。返回对象BaseEvent 基础事件对象属性列表：属性类型说明typeString事件类型timeStampInteger事件生成时的时间戳targetObject触发事件的组件的一些属性值集合currentTargetObject当前组件的一些属性值集合type代表事件的类型。timeStamp页面打开到触发事件所经过的毫秒数。target触发事件的源组件。属性类型说明idString事件源组件的idtagNameString当前组件的类型datasetObject事件源组件上由data-开头的自定义属性组成的集合dataset在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。示例：  DataSet Test Page({
  bindViewTap:function(event){
      event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
      event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  }
    })CustomEvent 自定义事件对象属性列表（继承 BaseEvent）：属性类型说明detailObject额外的信息detail自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。点击事件的detail 带有的   x, y 同 pageX, pageY 代表距离文档左上角的距离。TouchEvent 触摸事件对象属性列表（继承 BaseEvent）：属性类型说明touchesArray触摸事件，当前停留在屏幕中的触摸点信息的数组changedTouchesArray触摸事件，当前变化的触摸点信息的数组touchestouches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是   CanvasTouch 数组）。 表示当前停留在屏幕上的触摸点。Touch 对象属性类型说明identifierNumber触摸点的标识符pageX, pageYNumber距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴clientX,   clientYNumber距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴changedToucheschangedTouches 数据格式同 touches。 表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）。特殊事件：  中的触摸事件不可冒泡，所以没有 currentTarget。bindtap程序代码   Click me! 对应的jsPage({
  tapName: function(event) {
    console.log(event)
  }
    })1234512345输出结果{
    "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
    }]
    }可以看到，返回的type是tap 同时在target.id节点中也可以看到 对应的id 在a.target.dataset.hi中也可以找到对应的data-id的值（data-hi → hi）实际内容以文档为准微信小程序点击事件返回值的target分析测试过程在微信小程序中创建以下图片然后在调试中点击下面第5个。 console返回两个e 第一个e是第5块小块的e 第二个e是下面全部9小块组成的大块的e 可以看到，currentTarget节点是不一样的。分析在HTML或者WXML这些基于XML的树形结构的界面布局方式中，元素与元素之间是有层级关系的，子级元素上触发的事件，可以向父级元素逐层向上传递，所以，父级元素上也可以捕获子级元素上的事件并进行逻辑处理。 1. 使用   bind 开头的事件绑定，这种绑定不会阻止冒泡事件向上冒泡 2. 使用   catch 开头的事件绑定，这种绑定可以阻止冒泡事件向上冒泡结论event对象中 -   target是事件产生的源头组件 -   currentTarget则是当前捕获这个事件的组件。(current - adj. 现在的; 最近的; 流行的; 流传的; n. 电流; 趋势; 水流; 涌流;   )target.id/currentTarget.id 为 目标事件的id 测试使用的代码
   
       1movable-view>
    
           2movable-view>
    
           3movable-view>
    
           <movable-view   x="{{x}}" y="{{y}} 
                 
               

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道！