在使用html5作在手機上顯示輪播圖片的效果時忽然遇到touchmove事件在touchstart事件以後只觸發了一次touchmove以後和touchend一塊兒觸發了一次,咦,這是怎麼回事?怎麼不和mousemove一個道理呢,最後查了查資料是由於沒設置事件阻止引發的html
//綁定事件 function bindEvent() { document.getElementById("divid").addEventListener('touchstart', touchSatrtFunc,false); document.getElementById("divid").addEventListener('touchmove', touchMoveFunc,false); document.getElementById("divid").addEventListener('touchend', touchEndFunc,false); }
function touchSatrtFunc(evt) { var e = evt.touches[0]; } function touchMoveFunc(evt) { var e = evt.touches[0]; clientX_start = e.screenX; evt.preventDefault();//就是這句 } function touchEndFunc(evt) { }
touchstart: // 手指放到屏幕上的時候觸發 touchmove: // 手指在屏幕上移動的時候觸發 touchend: // 手指從屏幕上拿起的時候觸發 touchcancel: // 系統取消touch事件的時候觸發
//返回的參數 client / clientY:// 觸摸點相對於瀏覽器窗口viewport的位置 pageX / pageY:// 觸摸點相對於頁面的位置 screenX /screenY:// 觸摸點相對於屏幕的位置 identifier: // touch對象的unique ID