滑動頁面時防止touch事件的誤觸問題

2022-03-09 13:13:19 字數 570 閱讀 4346

在移動端頁面進行優化時,一般使用touch事件替代滑鼠相關事件,用的較多的是使用touchend事件替代pc端的click和mouseup事件。

但是,touchend事件在頁面滾動時有個問題。在滾動完成後,如果當前觸點的位置所指的元素繫結了touchend事件,這時便會觸發該元素的touchend事件,造成誤操作。

解決方法就是在頁面滾動時停止touchend事件冒泡,這樣就可以防止觸發touchend事件。

引入該函式並進行呼叫。

function

stoptouchendpropagationafterscroll(),

true

);

function

stoptouchendpropagation(ev)

}

在移動端,scroll事件是在滾動結束後才會觸發一次,而touchmove事件是在滑動過程中多次觸發,使用scroll會比使用touchmove在效能上有一定優化。但是,上面**之所以不用scroll事件,而用touchmove事件,是為了同時適用於小於乙個螢幕高度的頁面,所以也是不得已使用touchmove。

如何判斷touch事件滑動的方向?

場景 touch滑動有上,下,左,右四個方向,如何判斷其滑動的方向?措施 1.根據移動的值正負來判斷 滑動處理 varstartx,starty,moveendx,moveendy,x,y mybody.addeventlistener touchstart function e false myb...

移動端觸屏滑動touch事件相關

移動端觸屏滑動的效果其實就是輪播,在pc的頁面上很好實現,繫結click和mouseover等事件來完成。但是在移動裝置上,要實現這種輪播的效果,就需要用到核心的touch事件。處理touch事件能跟蹤到螢幕滑動的每根手指。以下是四種touch事件 touchstart 手指放到螢幕上時觸發 tou...

JS的Touch事件們,觸屏時的js事件

丫的,終於找到了js在平板電腦上的事件!iphone ipod touch ipad觸屏時的js事件 1 touch事件簡介 pc上的web頁面滑鼠會產生onmousedown onmouseup onmouseout onmouseover onmousemove的事件,但是在移動終端如iphon...