小程序鼠標(biāo)事件" style="margin: 0.8em 0px; padding: 0px; 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);">微信小程序鼠標(biāo)事件

事件分類

事件分為冒泡事件和非冒泡事件： 
1. 冒泡事件(bind)：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件會(huì)向父節(jié)點(diǎn)傳遞。 
2. 非冒泡事件(catch)：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件不會(huì)向父節(jié)點(diǎn)傳遞。
bind事件綁定不會(huì)阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

WXML的冒泡事件列表

類型	觸發(fā)條件
touchstart	手指觸摸動(dòng)作開始
touchmove	手指觸摸后移動(dòng)
touchcancel	手指觸摸動(dòng)作被打斷，如來電提醒，彈窗
touchend	手指觸摸動(dòng)作結(jié)束
tap	手指觸摸后馬上離開
longtap	手指觸摸后，超過350ms再離開

冒泡講解

<view id="outter" bindtap="handleTap1">
    outer view
    <view id="middle" catchtap="handleTap2">
        middle view
        <view id="inner" bindtap="handleTap3">
            inner view
        view>
    view>
view>

•  

點(diǎn)擊inner view后只觸發(fā)handleTap3，然后再觸發(fā)handleTap2.不觸發(fā)handleTap1。 
因?yàn)閔andleTap2中的綁定類型是catch，阻止了冒泡事件。

返回對(duì)象

BaseEvent 基礎(chǔ)事件對(duì)象屬性列表：

屬性	類型	說明
type	String	事件類型
timeStamp	Integer	事件生成時(shí)的時(shí)間戳
target	Object	觸發(fā)事件的組件的一些屬性值集合
currentTarget	Object	當(dāng)前組件的一些屬性值集合

type

代表事件的類型。

timeStamp

頁面打開到觸發(fā)事件所經(jīng)過的毫秒數(shù)。

target

觸發(fā)事件的源組件。

屬性	類型	說明
id	String	事件源組件的id
tagName	String	當(dāng)前組件的類型
dataset	Object	事件源組件上由data-開頭的自定義屬性組成的集合

dataset

在組件中可以定義數(shù)據(jù)，這些數(shù)據(jù)將會(huì)通過事件傳遞給 SERVICE。 書寫方式： 以data-開頭，多個(gè)單詞由連字符-鏈接，不能有大寫(大寫會(huì)自動(dòng)轉(zhuǎn)成小寫)如data-element-type，最終在 event.currentTarget.dataset 中會(huì)將連字符轉(zhuǎn)成駝峰e(cuò)lementType。

示例： 
DataSet Test

Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - 會(huì)轉(zhuǎn)為駝峰寫法
    event.currentTarget.dataset.alphabeta === 2 // 大寫會(huì)轉(zhuǎn)為小寫
  }
})

•  

CustomEvent 自定義事件對(duì)象屬性列表（繼承 BaseEvent）：

屬性	類型	說明
detail	Object	額外的信息

detail

自定義事件所攜帶的數(shù)據(jù)，如表單組件的提交事件會(huì)攜帶用戶的輸入，媒體的錯(cuò)誤事件會(huì)攜帶錯(cuò)誤信息，詳見組件定義中各個(gè)事件的定義。

點(diǎn)擊事件的detail 帶有的 x, y 同 pageX, pageY 代表距離文檔左上角的距離。

TouchEvent 觸摸事件對(duì)象屬性列表（繼承 BaseEvent）：

屬性	類型	說明
touches	Array	觸摸事件，當(dāng)前停留在屏幕中的觸摸點(diǎn)信息的數(shù)組
changedTouches	Array	觸摸事件，當(dāng)前變化的觸摸點(diǎn)信息的數(shù)組

touches

touches 是一個(gè)數(shù)組，每個(gè)元素為一個(gè) Touch 對(duì)象（canvas 觸摸事件中攜帶的 touches 是 CanvasTouch 數(shù)組）。 表示當(dāng)前停留在屏幕上的觸摸點(diǎn)。

Touch 對(duì)象

屬性	類型	說明
identifier	Number	觸摸點(diǎn)的標(biāo)識(shí)符
pageX, pageY	Number	距離文檔左上角的距離，文檔的左上角為原點(diǎn) ，橫向?yàn)閄軸，縱向?yàn)閅軸
clientX, clientY	Number	距離頁面可顯示區(qū)域（屏幕除去導(dǎo)航條）左上角距離，橫向?yàn)閄軸，縱向?yàn)閅軸

changedTouches

changedTouches 數(shù)據(jù)格式同 touches。 表示有變化的觸摸點(diǎn)，如從無變有（touchstart），位置變化（touchmove），從有變無（touchend、touchcancel）。

特殊事件： 

bindtap

程序代碼

Click me!

對(duì)應(yīng)的js

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

•  

輸出結(jié)果

{
"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 
同時(shí)在target.id節(jié)點(diǎn)中也可以看到 對(duì)應(yīng)的id 
在a.target.dataset.hi中也可以找到對(duì)應(yīng)的data-id的值（data-hi → hi）

實(shí)際內(nèi)容以文檔為準(zhǔn)

 

微信小程序點(diǎn)擊事件返回值的target分析

測試過程

在微信小程序中創(chuàng)建以下圖片

然后在調(diào)試中點(diǎn)擊下面第5個(gè)。 
console返回兩個(gè)e 
第一個(gè)e是第5塊小塊的e

第二個(gè)e是下面全部9小塊組成的大塊的e

可以看到，currentTarget節(jié)點(diǎn)是不一樣的。

分析

在HTML或者WXML這些基于XML的樹形結(jié)構(gòu)的界面布局方式中，元素與元素之間是有層級(jí)關(guān)系的，子級(jí)元素上觸發(fā)的事件，可以向父級(jí)元素逐層向上傳遞，所以，父級(jí)元素上也可以捕獲子級(jí)元素上的事件并進(jìn)行邏輯處理。 
1. 使用 bind 開頭的事件綁定，這種綁定不會(huì)阻止冒泡事件向上冒泡 
2. 使用 catch 開頭的事件綁定，這種綁定可以阻止冒泡事件向上冒泡

結(jié)論

event對(duì)象中 
- target是事件產(chǎn)生的源頭組件 
- currentTarget則是當(dāng)前捕獲這個(gè)事件的組件。

(current - adj. 現(xiàn)在的; 最近的; 流行的; 流傳的; n. 電流; 趨勢; 水流; 涌流; )

target.id/currentTarget.id 為 目標(biāo)事件的id 

測試使用的代碼

<view class="section">
    <movable-area style="height: 300px;width: 300px; background: red;">
        <movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true">1movable-view>

        <movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true">2movable-view>

        <movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true">3movable-view>

        <movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true">4movable-view>

        <movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true">5movable-view>

        <movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true">6movable-view>

        <movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true">7movable-view>

        <movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true">8movable-view>

        <movable-view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="b1" out-of-bounds="true">9movable-view>
    movable-area>

<view style="height: 300px;width: 300px; background: red;" class="main" bindtap="viewmove">
    <view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view">1view>

    <view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view">2view>

    <view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view">3view>

    <view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view">4view>

    <view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view" bindtap="viewmove">5view>

    <view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view">6view>

    <view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view">7view>

    <view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view">8view>

    <view x="{{x}}" y="{{y}}" direction="all" bindtouchmove="viewmove" out-of-bounds="true" class="view">9view>
view>

    <view class="btn-area">
        <button size="mini" bindtap="tap">click me to move to (30px, 30px)button>
    view>

    。
    。
    。
    。
    。。

    。。

    。
view>

•  

.k{
  background: green;
  height: 100px;
  width:  100px;
  position:absolute;
}

movable-view{
  height: 98px;
  width: 98px;
  background: blue;
  position:relative;
  border:1px dashed #fff;
}


.view{
  height: 98px;
  width: 98px;
  background: blue;
  position:relative;
  border:1px dashed #fff;
  display: inline-block;
}
.main{
  margin-top:10px;
}

•  

//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
      x:0,
      y:0
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
    app.getUserInfo(function(userInfo){
      //更新數(shù)據(jù)
      that.setData({
        userInfo:userInfo
      })
    })
  },  tap: function(e) {
        this.setData({
            x: 30,
            y: 30
        });},
  scroll:function(){
    console.log("haha")
  },
    move:function(e){
      this.setData({
              left:e.touches[0].clientX-60,
              top:e.touches[0].clientY-60
          })
      console.log(e)
    },
    b1:function (e) {
        //console.log("e")
        console.log(e)
        //console.log(this.data.x)
    },
    viewmove:function(e){
        viewmove(e,this)
    }

})

function viewmove(e,that){
    console.log(e)
}