浏览器处理触摸设备的鼠标悬停事件会引发错误的单击事件

Question

浏览器在触摸设备上处理mouseover和mouseleave事件的方式有问题。

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

现在我的问题是，只需轻轻一按，两个事件就会同时启动。我找不到解决这个问题的办法。似乎没有办法判断输入是来自鼠标还是触摸输入。

我整理了一个简单的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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
<div id="border">
<div id="inner">
</div>
</div>
</div>

我需要两次点击，第一次显示红框，第二次触发点击事件，同时为鼠标用户保留鼠标悬停行为。

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

Answer 1

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

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

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

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