1. 程式人生 > >touchstart, touchmove, touchend, mousedown, mousemove, mouseup, 手機端和pc端點選及觸控事件

touchstart, touchmove, touchend, mousedown, mousemove, mouseup, 手機端和pc端點選及觸控事件

touchstart事件:當手指觸控式螢幕幕時候觸發,即使已經有一個手指放在螢幕上也會觸發。

touchmove事件:當手指在螢幕上滑動的時候連續地觸發。在這個事件發生期間,呼叫preventDefault()事件可以阻止滾動。

touchend事件:當手指從螢幕上離開的時候觸發。

touchcancel事件:當系統停止跟蹤觸控的時候觸發。

 initTouchEvents: function () {
            if (isPC()) {
                this.touchstart = "mousedown";
                this.touchmove = "mousemove";
                this.touchend = "mouseup";
            }
        }

注:(1)pc端的用法為mosemove(mouseover),mouseleave;

(2)click和mousedown,mouseup不可同時對同一元素使用,click包含二者
---------------------
作者:huakaiwuxing
來源:CSDN
原文:https://blog.csdn.net/huakaiwuxing/article/details/79074863
版權宣告:本文為博主原創文章,轉載請附上博文連結!

 

1、Touch事件簡介

pc上的web頁面鼠 標會產生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件,但是在移動終端如 iphone、ipod  Touch、ipad上的web頁面觸屏時會產生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件,分別對應了觸屏開始、拖拽及完成觸屏事件和取消。

當按下手指時,觸發ontouchstart;

當移動手指時,觸發ontouchmove;

當移走手指時,觸發ontouchend。

當一些更高級別的事件發生的時候(如電話接入或者彈出資訊)會取消當前的touch操作,即觸發ontouchcancel。一般會在ontouchcancel時暫停遊戲、存檔等操作。

 

2、Touch事件與Mouse事件的出發關係

在觸屏操作後,手指提起的一剎那(即發生ontouchend後),系統會判斷接收到事件的element的內容是否被改變,如果內容被改變,接下來的事 件都不會觸發,如果沒有改變,會按照mousedown,mouseup,click的順序觸發事件。特別需要提到的是,只有再觸發一個觸屏事件時,才會 觸發上一個事件的mouseout事件。

 

//阻止事件

document.addEventListener('touchmove', function(event) {
        event.preventDefault();
    }, false);

語法

event.preventDefault()

說明

該方法將通知 Web 瀏覽器不要執行與事件關聯的預設動作(如果存在這樣的動作)。例如,如果 type 屬性是 "submit",在事件傳播的任意階段可以呼叫任意的事件控制代碼,通過呼叫該方法,可以阻止提交表單。注意,如果 Event 物件的 cancelable 屬性是 fasle,那麼就沒有預設動作,或者不能阻止預設動作。無論哪種情況,呼叫該方法都沒有作用。