我在移动设备上遇到了与Google Chrome（78）有关的一些事件相关问题。我有一个设置，在单击按钮时会附加文件输入（包括标签）。输入的文件将完全替换按钮，并将被附加在与按钮原先完全相同的位置。
在大多数浏览器上，这都可以正常工作。但是，似乎移动版的Google Chrome浏览器在首次触摸按钮后会触发延迟的点击事件，从而导致点击激活文件上传对话框。即使在初次触摸时甚至没有输入文件，也将在文件输入上触发此单击。
因为我正在侦听TouchEvent，所以无法停止按钮单击的传播，但是其他事件是MouseEvent。我不想听MouseEvent只是为了stopPropagation以防止任何跨浏览器问题。PreventDefault也不是一个选项，因为该按钮位于滑块中，这会破坏滑块的功能。
另一个选择是隐藏文件输入，直到事件循环通过（setTimeout为0）为止，这基本上可以解决该问题，但是我希望有一个更优雅的解决方案。你们中的任何人是否有可能解决此问题？
我已经用展示问题的最小代码示例设置了CodePen：https ://codepen.io/frankderouge/pen/wvvRPRV
基本设置是文件输入最初被隐藏，然后在单击按钮时显示。
//This listener is added to the 'button'
document.querySelector('.toggle_off').addEventListener('touchstart', (e) => {
//This won't do anything since we're handling a touch event, not a click event.
e.stopPropagation();
//This fixes the dialog open but would break sliding functionality
//e.preventDefault();
//Hide the button
e.target.style.display = 'none';
//Then show the file input, on which the additional event will be triggered
document.querySelector('.toggle_on').style.display = 'block';
});
提前致谢！
事实证明，这被称为“幽灵点击”，出于兼容性原因而存在，实际上是“预期行为”。我没想到如果鼠标事件最初没有绑定到原始元素，则不会发生幻影单击，但是显然这确实发生在某些浏览器中。
可以通过在TouchEvent上调用preventDefault来防止幻影单击，我在最初的帖子中说过：
PreventDefault也不是一个选项，因为该按钮位于滑块中，这会破坏滑块的功能。
但是我最近了解到，在触摸的“一部分”上调用preventDefault并不重要，因为在所有触摸事件之后总是会触发幻影点击。因此，如果在touchend而不是touchstart或touchmove上调用preventDefault，则不会发生阻止滚动的问题。
document.querySelector('.element').addEventListener('touchstart', (e) => {
//Process the touch start event
});
document.querySelector('.element').addEventListener('touchend', (e) => {
//Prevent default on the touchend, preventing the ghost click from happening
//But still allowing the users to zoom and scroll
e.preventDefault();
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句