触摸事件
我们使用的图形浏览器的风格,是考虑到鼠标界面的情况下而设计的,那个时候触摸屏非常罕见。 为了使网络在早期的触摸屏手机上“工作”,在某种程度上,这些设备的浏览器假装触摸事件是鼠标事件。 如果你点击你的屏幕,你会得到'mousedown'
,'mouseup'
和'click'
事件。
但是这种错觉不是很健壮。 触摸屏与鼠标的工作方式不同:它没有多个按钮,当手指不在屏幕上时不能跟踪手指(来模拟"mousemove"
),并且允许多个手指同时在屏幕上。
鼠标事件只涵盖了简单情况下的触摸交互 - 如果您为按钮添加"click"
处理器,触摸用户仍然可以使用它。 但是像上一个示例中的可调整大小的栏在触摸屏上不起作用。
触摸交互触发了特定的事件类型。 当手指开始触摸屏幕时,您会看到'touchstart'
事件。 当它在触摸中移动时,触发"touchmove"
事件。 最后,当它停止触摸屏幕时,您会看到"touchend"
事件。
由于许多触摸屏可以同时检测多个手指,这些事件没有与其关联的一组坐标。 相反,它们的事件对象拥有touches
属性,它拥有一个类数组对象,每个对象都有自己的clientX
,clientY
,pageX
和pageY
属性。
你可以这样,在每个触摸手指周围显示红色圆圈。
<style>
dot { position: absolute; display: block;
border: 2px solid red; border-radius: 50px;
height: 100px; width: 100px; }
</style>
<p>Touch this page</p>
<script>
function update(event) {
for (let dot; dot = document.querySelector("dot");) {
dot.remove();
}
for (let i = 0; i < event.touches.length; i++) {
let {pageX, pageY} = event.touches[i];
let dot = document.createElement("dot");
dot.style.left = (pageX - 50) + "px";
dot.style.top = (pageY - 50) + "px";
document.body.appendChild(dot);
}
}
window.addEventListener("touchstart", update);
window.addEventListener("touchmove", update);
window.addEventListener("touchend", update);
</script>
您经常希望在触摸事件处理器中调用preventDefault
,来覆盖浏览器的默认行为(可能包括在滑动时滚动页面),并防止触发鼠标事件,您也可能拥有它的处理器。