事件点透
原因:元素触碰之后,会立即执行 touch 事件,然后会有一段时间的延迟,延迟过后在点击的位置上寻找对应元素,看看是否有鼠标事件,如果有就会立即执行
<!-- 事件点透案例 -->
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
opacity: 0.5;
top: 0;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<div></div>
<script>
let div = document.querySelector("div");
/* 再换成一般的 click 事件试试 【只点击一次】 */
div.addEventListener("touchend", (e) => {
div.style.display = "none";
console.log("11");
// e.preventDefault(); // 解决事件点透
});
</script>
</body>
</html>
- 解决事件点透
-
不再使用移动端的鼠标鼠标【同时不再使用 a 标签的 href 属性】
-
阻止默认事件 【 e.preventDefault() 】
触碰的相关属性
- touches 当前屏幕上的手指列表
- targetTouches 当前元素上的手指列表
- changedTouches 触发当前事件的手指列表
box.addEventListener("touchend", function (e) {
console.log(e.touches);
console.log(e.targetTouches);
console.log(e.changedTouches);
});
检测横屏竖屏
// 监听横竖屏切换
window.addEventListener("orientationchange", function () {
if (window.orientation === 90 || window.orientation === -90) {
console.log("横屏状态");
} else {
console.log("竖屏状态");
}
});
设备移动
// 监听设备移动
window.addEventListener("devicemotion", (e) => {
// 三轴的加速度
let { x, y, z } = e.acceleration;
document.getElementById("box").innerHTML = `
x轴:${x}<br/>
y轴:${y}<br/>
z轴:${z}<br/>
`;
});