移動端（二） 基礎事件

2021-09-25 04:53:15 字數 928 閱讀 5326

1.ontouchstart--手指觸碰事件

2.ontouchmove--手指移動事件

3.ontouchend--手指離開事件

可以分別對應pc端的 onmousedown、onmousemove、nomouseup三個事件

dom0:

//不推薦使用 --- 因為有些模擬器不支援


box.ontouchstart = function();
dom2:使用事件監聽

//dom2  --- 推薦（開發）


box.addeventlistener('touchstart',function());
取消預設行為有兩種：1.return false; 對應dom0

2.event.preventdefault();對應dom2操作



啦啦啦啊啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦


啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
阻止冒泡：子元素觸發的事件不傳遞到父元素；

event.stoppropagation();
舉乙個例子，父元素漢字上長按沒有彈窗，子元素長按英文有彈窗，如下：



哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈


laaaaaaaaaaaaaaaaallalaallalaal


event.changedtouches       目標元素上目標事件上的手指列表,  //精準


event.targettouches 目標元素上的手指列表


event.touches 螢幕上的手指列表


三個物件都是陣列

移動端JS 觸控事件基礎

一 手機上的觸控事件 基本事件 touchstart 手指剛接觸螢幕時觸發 touchmove 手指在螢幕上移動時觸發 touchend 手指從螢幕上移開時觸發 下面這個比較少用 touchcancel 觸控過程被系統取消時觸發 每個事件都有以下列表，比如touchend的targettouches...

移動端事件

移動端事件 onclick 移動端也可以使用onclick事件，但是查閱資料上說會有300ms的延遲，究竟是不是有待考究。ontouchstart 相當於pc端的onmousedown，詳細可參照先前寫的文件 事件 下同 ontouchend 相當於pc端的onmouseup.ontouchmove...

移動端事件

一 touch 1 touchstart 當手指觸碰螢幕時發生，不管當前多少根手指 2 touchmove 當手指在螢幕上滑動時連續觸發，通常我們在滑屏頁面，會呼叫event的preventdefault 可以阻止預設情況的發生 阻止頁面滾動 3 touchend 當手指離開螢幕時觸發 4 touc...