微信小程序 觸控事件：

            微信小程序的"事件"挺有意思。看了說(shuō)明文檔后發(fā)現(xiàn)它的功能很全，事件可以向父節(jié)點(diǎn)傳遞，而且打印這個(gè)事件的信息很透明，調(diào)試起來(lái)應(yīng)該非常方便。
接下來(lái)把文檔copy過(guò)來(lái)

原文地址：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

》》》什么是事件

1. 事件是視圖層到邏輯層的通訊方式。
2. 事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。
3. 事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。
4. 事件對(duì)象可以攜帶額外信息，如id, dataset, touches。

事件的使用方式

在組件中綁定一個(gè)事件處理函數(shù)。

如bindtap，當(dāng)用戶點(diǎn)擊該組件的時(shí)候會(huì)在該頁(yè)面對(duì)應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)。

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

在相應(yīng)的Page定義中寫上相應(yīng)的事件處理函數(shù)，參數(shù)是event。

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

可以看到log出來(lái)的信息大致如下：

{ 
"type": "tap", 
"timeStamp": 1252, 
"target": { 
 "id": "tapTest", 
 "offsetLeft": 0, 
 "offsetTop": 0, 
 "dataset": { 
 "hi": "MINA" 
 } 
}, 
"currentTarget": { 
 "id": "tapTest", 
 "offsetLeft": 0, 
 "offsetTop": 0, 
 "dataset": { 
 "hi": "MINA" 
 } 
}, 
"touches": [{ 
 "pageX": 30, 
 "pageY": 12, 
 "clientX": 30, 
 "clientY": 12, 
 "screenX": 112, 
 "screenY": 151 
}], 
"detail": { 
 "x": 30, 
 "y": 12 
} 
} 

事件詳解

事件分類

事件分為冒泡事件和非冒泡事件：

冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件會(huì)向父節(jié)點(diǎn)傳遞。

非冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件不會(huì)向父節(jié)點(diǎn)傳遞。

》》》事件分類

1. touchstart 手指觸摸
2. touchmove 手指觸摸后移動(dòng)
3. touchcancel 手指觸摸動(dòng)作被打斷，如彈窗和來(lái)電提醒
4. touchend 手指觸摸動(dòng)作結(jié)束
5. tap 手指觸摸后離開(kāi)
6. longtap 手指觸摸后后，超過(guò)350ms離開(kāi)

》》》事件綁定

事件綁定的寫法同組件的屬性，以 key、value 的形式。

1. key 以bind或catch開(kāi)頭，然后跟上事件的類型，如bindtap, catchtouchstart
2. value 是一個(gè)字符串，需要在對(duì)應(yīng)的 Page 中定義同名的函數(shù)。不然當(dāng)觸發(fā)事件的時(shí)候會(huì)報(bào)錯(cuò)。 bind事件綁定不會(huì)阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

上面簡(jiǎn)單介紹了小程序事件基礎(chǔ)，是時(shí)候彰顯"事件"的威力：

1. 單擊(tap)
2. 雙擊(dbtap)
3. 長(zhǎng)按(longtap)
4. 滑動(dòng)
5. 多點(diǎn)觸控

1.單擊

單擊事件由touchstart、touchend組成,touchend后觸發(fā)tap事件。

<view>
 <button type="primary" bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="mytap">點(diǎn)我吧</button>
</view>
mytouchstart: function(e){ console.log(e.timeStamp + '- touch start')
},mytouchend: function(e){ console.log(e.timeStamp + '- touch end')
},mytap: function(e){ console.log(e.timeStamp + '- tap')
}

2.雙擊

雙擊事件由兩個(gè)單擊事件組成，兩次間隔時(shí)間小于300ms認(rèn)為是雙擊；微信官方文檔沒(méi)有雙擊事件，需要開(kāi)發(fā)者自己定義處理。

<view>
 <button type="primary" bindtap="mytap">點(diǎn)我吧</button>
</view>

 3.長(zhǎng)按

長(zhǎng)按事件手指觸摸后，超過(guò)350ms再離開(kāi)。

<view>
 <button type="primary" bindtouchstart="mytouchstart" bindlongtap="mylongtap" 
 bindtouchend="mytouchend" bindtap="mytap">點(diǎn)我吧</button>
</view>
mytouchstart: function(e){ console.log(e.timeStamp + '- touch start')
},//長(zhǎng)按事件mylongtap: function(e){ console.log(e.timeStamp + '- long tap')
 },mytouchend: function(e){ console.log(e.timeStamp + '- touch end')
},mytap: function(e){ console.log(e.timeStamp + '- tap')
}

單擊、雙擊、長(zhǎng)按屬于點(diǎn)觸事件，會(huì)觸發(fā)touchstart、touchend、tap事件，touchcancel事件只能在真機(jī)模擬，不多說(shuō)了。

4.滑動(dòng)

手指觸摸屏幕并移動(dòng)，為了簡(jiǎn)化起見(jiàn)，下面以水平滑動(dòng)和垂直滑動(dòng)為例。 滑動(dòng)事件由touchstart、touchmove、touchend組成

坐標(biāo)圖：

1. 以屏幕左上角為原點(diǎn)建立直角坐標(biāo)系。第四象限為手機(jī)屏幕，Y軸越往下坐標(biāo)值越大（注意跟數(shù)學(xué)象限的區(qū)別）。
2. 假設(shè)A點(diǎn)為touchstart事件觸摸點(diǎn)，坐標(biāo)為A(ax,ay)，然后手指向上滑動(dòng)到點(diǎn)B(bx,by)，就滿足條件by < ay;
3. 同理，向右滑動(dòng)到C(cx,cy),滿足cx > ax；向下滑動(dòng)到D(dx,dy),滿足dy > ay；向左移動(dòng)到E(ex，ey)滿足ex < ax.
4. 計(jì)算線段AB在Y軸上投影長(zhǎng)度為m,在X軸上的投影長(zhǎng)度為n
5. 計(jì)算r = m/n,如果r > 1,視為向上滑動(dòng)。
6. 同理計(jì)算線段AC,AD,AE在Y軸投影長(zhǎng)度與X軸的投影長(zhǎng)度之比，得出向右向下向左的滑動(dòng)。

以上沒(méi)考慮r為1的情況。

<view>
 <button type="primary" bindtouchstart="mytouchstart" bindtouchmove="mytouchmove">點(diǎn)我吧</button>
</view>

5.多點(diǎn)觸控

由于模擬器尚不支持多點(diǎn)觸控，內(nèi)測(cè)開(kāi)放后，繼續(xù)補(bǔ)充。

 感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

最新評(píng)論