移動端事件 touch

touch事件有包括以下三個:

注意:touch繫結方式

touch 事件在模擬器下不支援用on方式繫結事件;

在真機上on方式和事件偵聽都沒有問題

推薦都使用addeventlistener()的方式新增事件

可以對比記憶兩者:

touch事件和mouse事件的區別

其實,在touchmove和touchend依賴touchstart事件,就是 touchmove要向觸發就必須先觸發touchstart事件,touchend也就先觸發了touchstart事件

其實,在移動端上mouse事件也是可以被監聽到的,但是,在移動端上,mouse事件有300ms的延遲,也就是說,你點選了某乙個元素一下(假設它已經繫結了mouse類的事件),300ms後才會觸發這個元素的mouse事件.

在某乙個畫素上有兩個以上的元素時( 通過定位來做到),當上面的元素新增了touch事件,下面的元素有click事件的時候,由於click有300ms的延遲,如果300ms之後下面的元素獲得了點選,那麼就會觸發下面元素的click事件

1. 當我們在元素上按下，首先立即執行元素的touch事件

2. 另外，瀏覽器會記錄我們按下時的座標，300ms之後，在該座標上重新查詢元素，如果元素有mouse事件，就把元素的mouse執行了.

a 標籤會自動跳轉就涉及到了瀏覽器的缺省事件,在移動端,瀏覽器的預設事件需要記住的有:

a標籤內建了click事件,在移動端有300ms延遲

document.addeventlistener('touchstart', function(e) );

阻止被選中,導致拖拽卡頓

阻止事件點透

解決ios10之後，ios下的safari不在支援viewport的禁止縮放

解決ios10之後, body的overflow無效的問題

滾動條不能滑動

阻止a標籤跳轉

阻止所有的滑鼠事件(獲取頁面焦點,失去焦點)

阻止所有的系統選單 (右鍵上下文選單)

阻止所有的輸入框輸入

在移動端阻止滑鼠事件執行

阻止頁面被縮放

阻止頁面的回彈效果

阻止a標籤或者input標籤獲得焦點

阻止系統預設滾動條

什麼時候阻止預設行為呢?

當頁面有滑屏或者拖拽時,就要阻止瀏覽器的預設行為

在某個元素上不想瀏覽器清除預設樣式呢?

可以在當前元素的事件中,阻止冒泡

e.stoppropagation();

這樣document就不會獲得該事件,也就不會執行e.preventdefault()了

如果頁面上有需要大面積滑屏的地方，最好還是清除預設行為，但是當前的這個頁面上的滾動條，就需要我們自己去實現，另外頁面上的a標籤需要我們自己加js跳轉，如果頁面上有輸入框，或者長按出現系統選單的區域，建議寫在另外乙個頁面中.