Question

浏览器在触摸设备上处理鼠标悬停和鼠标移动事件的方式存在问题。

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

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

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

＆＃13;

$("#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');
}

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

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

Answer 1

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

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

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

请参阅此JSFiddle了解（有点不稳定）示例。

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

1 个答案: