浏览器处理触摸设备的鼠标悬停事件会导致错误的点击事件触发 [英] Browser handling mouseover event for touch devices causes wrong click event to fire

问题描述

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

I have a problem with the way browsers are handling mouseover and mouseleave events on touch devices.

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

I have one element A which shows and hides another Element B when you hover the mouse. Element B is a button with a click event. This is perfectly fine when using a mouse but when using touch input there is no mouseover of course. Browsers automaticly handle this the way that when you tap once on the element the mouseover event is fired and when you tap anywhere else on the screen the mouseleave event is fired (which makes sense most of the time).

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

Now my problem is that both events are fired at once with just one tap. And I'm unable to find a way around that. There seems to be no way to tell if the input was from a mouse or touch input.

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

I've put together a simple jsfiddle showcasing the problem: 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>

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

I need that to be 2 taps, first one to show the red box and second one to fire the click event while keeping the mouseover behavior for mouse users.

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

I'm really not sure what is exactly happening there. The element is not displayed and has no event attached in the moment the user taps there for the first time and still the event is fired.

推荐答案

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

Try adding the following method to your code:

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

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

This method will attempt raise a touch event. You can then use it to determine if the user is using a touch-enabled device and adjust your code accordingly.

请参阅 JSFiddle （有点不稳定）的例子。

See this JSFiddle for a (somewhat choppy) example.

这篇关于浏览器处理触摸设备的鼠标悬停事件会导致错误的点击事件触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！