【前端學習】JavaScript移動端事件與對象

·touch的三個事件

移動端新增"touch"事件，表示觸摸事件。

·touchstart

dom.addEventListener(“touchstart”, handler, false);

box.addEventListener("touchstart", function() {
	console.log("觸摸開始");			
});

·touchmove

dom.addEventListener(“touchmove”, handler, false);

box.addEventListener("touchmove", function() {
	console.log("觸摸中……");
});

·touchend

dom.addEventListener(“touchend”, handler, false);

box.addEventListener("touchmove", function() {
	console.log("觸摸中……");
});

·事件對象

在touchstart事件和touchmove事件中，通過e.touches獲取手指對象列表。

box.addEventListener("touchstart", function(e) {
	console.log("當手指按下的時候，手指的位置x：" + e.touches[0].clientX);
	// console.log("當手指按下的時候，手指的位置y：" + e.touches[0].clientY);
}, false);

在touchend事件中，因爲手指已經離開屏幕，所以e.touches獲取不到手指信息，需要從e.changedTouches中獲取。

carousel.addEventListener("touchend", function(e) {
	console.log("當手指離開的時候，手指的位置x：" + e.changedTouches[0].clientX);
});