浏览器处理触摸设备的鼠标hover事件会导致错误的点击事件触发

我对浏览器在触摸设备上处理鼠标hover和鼠标移动事件的方式有疑问。

我有一个元素A，当你hover鼠标时，它会显示并隐藏另一个元素B. 元素B是一个带有单击事件的按钮。 使用鼠标时这非常好，但使用触摸输入时，当然没有鼠标hover。 浏览器自动处理这种方式，当你点击元素时，鼠标hover事件被触发，当你点击屏幕上的任何其他地方时，mouseleave事件被触发（这在大多数情况下是有意义的）。

现在我的问题是两个事件只需轻轻一击即可立即触发。 我无法找到解决办法。 似乎没有办法判断输入是来自鼠标还是触摸输入。

我把一个简单的jsfiddle放在一起展示了这个问题： https ：//jsfiddle.net/djmpx1q4/1/

$("#outer").hover(function(){ show(); }, function(){ hide(); }); function show() { $("#inner").css('display', 'block'); $("#inner").on('click', function(){ alert('hello'); }); } function hide() { $("#inner").css('display', 'none'); $("#inner").off('click'); } 

 #outer { padding:50px; width:200px; height: 200px; background-color: #FFFFFF; } #border { border: 1px solid black; width:100%; height:100%; } #inner { display: none; width:100%; height:100%; background-color: #CC0000; } 

我需要它是2个点击，第一个显示红色框，第二个触发点击事件，同时保持鼠标用户的鼠标hover行为。

我真的不确定那里到底发生了什么。 在用户第一次点击该元素并且仍然触发事件时，该元素不会显示且没有附加事件。

Answer 1

尝试将以下方法添加到您的代码中：

 function detectMobile() { try { document.createEvent("TouchEvent"); return true; } catch (e) { return false;; } } 

此方法将尝试引发触摸事件。 然后，您可以使用它来确定用户是否正在使用启用触摸的设备并相应地调整您的代码。

请参阅此JSFiddle以获取（有些不稳定）示例。