由于我們在将點選事件委托到div,span,font,p等元素标簽上時會導緻移動端的ios裝置無法識别這個點選事件(一般指click事件),
此時我們一般會使用touchstart來替換click事件,但是使用touchstart來代替click事件的弊端就立刻顯示出來,每當我們滑動螢幕時就會立刻出發點選事件
此時加入我這個封裝的方法,這個弊端就會迎刃而解
function tap(el,fn){
var startPoint = {};
el.addEventListener('touchstart', function(e) {
startPoint = {
x: e.changedTouches[0].pageX,
y: e.changedTouches[0].pageY
};
});
el.addEventListener('touchend', function(e) {
var nowPoint = {
x: e.changedTouches[0].pageX,
y: e.changedTouches[0].pageY
};
if(Math.abs(nowPoint.x - startPoint.x) < 5
&&Math.abs(nowPoint.y - startPoint.y) < 5) {
fn&&fn.call(el,e)
}
});
}
下面順便講一下當使用touchstart來替換click時,必須要記住一點:一定不要忘了添加 event.preventDefault();
但是問題又來了,添加 event.preventDefault();浏覽器就會報錯,
解決辦法:
- 1、注冊處理函數時,用如下方式,明确聲明為不是被動的
window.addEventListener(‘touchmove’, func, { passive: false })
- 2、應用 CSS 屬性 touch-action: none; 這樣任何觸摸事件都不會産生預設行為,但是 touch 事件照樣觸發。
.sortable-handler {
touch-action: none;
}