iOS Safari 中的元素边缘未触发触摸事件
在触摸设备上，触摸元素时会触发以下事件：
- touchstart
- touchend
- mouseenter
- mousedown
- mouseup
- click
mouseenter、mousedown、mouseup 和 click 事件由 touchend 事件模拟。如果你想禁用鼠标事件的模拟，可以使用preventDefault()。
但是，如果在 iOS Safari 中我触摸元素的边缘，则会触发以下事件：
- mouseenter
- mousedown
- mouseup
- click
不知何故，触摸事件不会在边缘触发，因此我也无法使用 PreventDefault() 来停止模拟鼠标事件。
iPhone 和 iPad 上都会出现此问题。
我搜索了 Stack Overflow 和 Google，但找不到任何关于此的信息。没有错误，也没有解决方案。有谁知道这是否是 Safari 中的一个已知错误？
我创建了最基本的代码来重现此错误 JSFiddle:
HTML:
<div id="element"></div>
<div id="log"></div>
CSS:
#element {
height: 100px;
width: 100px;
background: yellow;
margin: 20px;
}
JavaScript:
function handler(event) {
const log = document.getElementById('log');
log.innerHTML = `${event.type}<br />${log.innerHTML}`;
}
const element = document.getElementById('element');
element.addEventListener('mouseenter', handler);
element.addEventListener('mouseleave', handler);
element.addEventListener('mousedown', handler);
element.addEventListener('mouseup', handler);
element.addEventListener('click', handler);
element.addEventListener('focus', handler);
element.addEventListener('blur', handler);
element.addEventListener('touchstart', handler);
element.addEventListener('touchend', handler);
On touch devices the following events are triggered when touching an element:
- touchstart
- touchend
- mouseenter
- mousedown
- mouseup
- click
The mouseenter, mousedown, mouseup and click events are emulated by the touchend event. If you want to disable this emulation of mouse events, preventDefault() can be used.
But if in iOS Safari I touch the edges of an element the following events are triggered:
- mouseenter
- mousedown
- mouseup
- click
Somehow the touch events are not triggered on the edges and because of this I also can't use preventDefault() to stop the emulation of the mouse events.
The problem occurs on both iPhone as iPad.
I searched Stack Overflow and Google, but I can't find anything about this. No bugs and no solutions. Does anybody know if this is a known bug in Safari?
I created the most basic code to reproduce this error in JSFiddle:
HTML:
<div id="element"></div>
<div id="log"></div>
CSS:
#element {
height: 100px;
width: 100px;
background: yellow;
margin: 20px;
}
JavaScript:
function handler(event) {
const log = document.getElementById('log');
log.innerHTML = `${event.type}<br />${log.innerHTML}`;
}
const element = document.getElementById('element');
element.addEventListener('mouseenter', handler);
element.addEventListener('mouseleave', handler);
element.addEventListener('mousedown', handler);
element.addEventListener('mouseup', handler);
element.addEventListener('click', handler);
element.addEventListener('focus', handler);
element.addEventListener('blur', handler);
element.addEventListener('touchstart', handler);
element.addEventListener('touchend', handler);
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
尝试将事件侦听器附加到最外面的元素（html 标记）。
查看更多：
https://www.tutorialrepublic.com/javascript-tutorial/javascript-事件传播.php
Try attaching the event listener to the outermost element, the html tag.
See more:
https://www.tutorialrepublic.com/javascript-tutorial/javascript-event-propagation.php