微信小程序鼠標事件

事件分類

事件分為冒泡事件和非冒泡事件：?
1. 冒泡事件(bind)：當一個組件上的事件被觸發后，該事件會向父節點傳遞。?
2. 非冒泡事件(catch)：當一個組件上的事件被觸發后，該事件不會向父節點傳遞。?
bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

WXML的冒泡事件列表

類型觸發條件

touchstart	手指觸摸動作開始
touchmove	手指觸摸后移動
touchcancel	手指觸摸動作被打斷，如來電提醒，彈窗
touchend	手指觸摸動作結束
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>

點擊inner view后只觸發handleTap3，然后再觸發handleTap2.不觸發handleTap1。?
因為handleTap2中的綁定類型是catch，阻止了冒泡事件。

返回對象

BaseEvent 基礎事件對象屬性列表：

屬性類型說明

type	String	事件類型
timeStamp	Integer	事件生成時的時間戳
target	Object	觸發事件的組件的一些屬性值集合
currentTarget	Object	當前組件的一些屬性值集合

type

代表事件的類型。

timeStamp

頁面打開到觸發事件所經過的毫秒數。

target

觸發事件的源組件。

屬性類型說明

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

dataset

在組件中可以定義數據，這些數據將會通過事件傳遞給 SERVICE。 書寫方式： 以data-開頭，多個單詞由連字符-鏈接，不能有大寫(大寫會自動轉成小寫)如data-element-type，最終在 event.currentTarget.dataset 中會將連字符轉成駝峰elementType。

示例：?
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

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

?

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

屬性類型說明

detail	Object	額外的信息

detail

自定義事件所攜帶的數據，如表單組件的提交事件會攜帶用戶的輸入，媒體的錯誤事件會攜帶錯誤信息，詳見組件定義中各個事件的定義。

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

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

屬性類型說明

touches	Array	觸摸事件，當前停留在屏幕中的觸摸點信息的數組
changedTouches	Array	觸摸事件，當前變化的觸摸點信息的數組

touches

touches 是一個數組，每個元素為一個 Touch 對象（canvas 觸摸事件中攜帶的 touches 是 CanvasTouch 數組）。 表示當前停留在屏幕上的觸摸點。

Touch 對象

屬性類型說明

identifier	Number	觸摸點的標識符
pageX, pageY	Number	距離文檔左上角的距離，文檔的左上角為原點 ，橫向為X軸，縱向為Y軸
clientX, clientY	Number	距離頁面可顯示區域（屏幕除去導航條）左上角距離，橫向為X軸，縱向為Y軸

changedTouches

changedTouches 數據格式同 touches。 表示有變化的觸摸點，如從無變有（touchstart），位置變化（touchmove），從有變無（touchend、touchcancel）。

特殊事件： <canvas/> 中的觸摸事件不可冒泡，所以沒有 currentTarget。

bindtap

程序代碼

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

對應的js

Page({tapName: function(event) { console.log(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 }] }

?

可以看到，返回的type是tap?
同時在target.id節點中也可以看到 對應的id?
在a.target.dataset.hi中也可以找到對應的data-id的值（data-hi → hi）

?

由鼠標事件（MouseEvent）可以發現：
???????其中包含了許多的坐標，且每個坐標的含義都不一樣。下面我們來挨個介紹常用的坐標，以及它們的含義。

一、clientX、clientY
點擊位置距離當前body可視區域的x，y坐標

二、pageX、pageY
對于整個頁面來說，包括了被卷去的body部分的長度

三、screenX、screenY
點擊位置距離當前電腦屏幕的x，y坐標

四、offsetX、offsetY
相對于帶有定位的父盒子的x，y坐標

五、x、y
和screenX、screenY一樣

如圖所示：

?

轉載于:https://www.cnblogs.com/dianzan/p/8323485.html

總結

以上是生活随笔為你收集整理的小程序 鼠标事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。