微信小程序鼠標(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)作被打斷，如來(lái)電提醒，彈窗
touchend	手指觸摸動(dòng)作結(jié)束
tap	手指觸摸后馬上離開
longtap	手指觸摸后，超過(guò)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ì)象屬性列表：

屬性類型說(shuō)明

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

type

代表事件的類型。

timeStamp

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

target

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

屬性類型說(shuō)明

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

dataset

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

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

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

?

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

屬性類型說(shuō)明

detail	Object	額外的信息

detail

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

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

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

屬性類型說(shuō)明

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ì)象

屬性類型說(shuō)明

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

changedTouches

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

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

bindtap

程序代碼

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

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

?

由鼠標(biāo)事件（MouseEvent）可以發(fā)現(xiàn)：
???????其中包含了許多的坐標(biāo)，且每個(gè)坐標(biāo)的含義都不一樣。下面我們來(lái)挨個(gè)介紹常用的坐標(biāo)，以及它們的含義。

一、clientX、clientY
點(diǎn)擊位置距離當(dāng)前body可視區(qū)域的x，y坐標(biāo)

二、pageX、pageY
對(duì)于整個(gè)頁(yè)面來(lái)說(shuō)，包括了被卷去的body部分的長(zhǎng)度

三、screenX、screenY
點(diǎn)擊位置距離當(dāng)前電腦屏幕的x，y坐標(biāo)

四、offsetX、offsetY
相對(duì)于帶有定位的父盒子的x，y坐標(biāo)

五、x、y
和screenX、screenY一樣

如圖所示：

?

轉(zhuǎn)載于:https://www.cnblogs.com/dianzan/p/8323485.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。