鼠标悬停和单击事件冲突

Question

我正在尝试使用 on() 事件将单击和鼠标悬停事件绑定到链接，本质上是在桌面上具有悬停行为，在移动设备和平板电脑上单击。我目前遇到的问题是两个事件是同时触发的。是否可以干净地执行此操作，或者我应该只为屏幕宽度添加一个条件并专门在桌面上应用悬停，单击移动设备的事件？基本的JS小提琴在这里：http://jsfiddle.net/4wr3da8p/

$('div').on('click mouseover', 'a', function(e) {
e.preventDefault();
$(this).toggleClass('active');
});

编辑： 更新了 jsfiddle 以更好地显示我正在尝试做什么。我想切换相邻元素的显示，所以我认为 CSS 伪类会有所帮助。

http://jsfiddle.net/4wr3da8p/

$('div').on('click mouseover', 'a', function(e) {
e.preventDefault();
$('.content').toggleClass('active');
});

Answer 1

您可以将点击事件与 jquery 用于移动设备和鼠标悬停在桌面上使用

Answer 2

我怀疑您遇到的是，当您第一次将鼠标移动到单击位置(但在实际单击之前)时，"活动"类会打开，但是当您单击时，该类会切换回关闭。这就是切换操作的问题。

如果你要做的只是在元素变为活动或悬停状态时应用某个类，并在元素不活跃或悬停时删除该类，那么你根本不需要 JavaScript。你可以只用CSS和:hover和:active伪类来做到这一点。您无需担心这两种情况同时为真并相互抵消。

div:active, div:hover { background:yellow; }

<div>
<p>This will become yellow when you hover over it or when you click it.</p>
<p>The class will no longer be applied when you move the mouse out of  the area or after the click is done.</p>
</div>

Answer 3

您可以利用<input type="checkbox">和<label>元素，附加到#bar和#foo元素change事件，css:hover，:checked伪类，一般同级选择器~。

$(function() {
$("#bar").change(function() {
if (this.checked) {
$(this).hide().add("#foo").prop("checked", false);
}
});
$("#foo").change(function() {
if (this.checked) {
$("[for=bar]").css("display", "inline-block !important");
}
});
});

#foo,
#bar,
span.bar,
[for="bar"] {
display: none;
}
[for="foo"]:hover ~ [for="bar"],
#foo:checked ~ [for="bar"],
[for="foo"]:hover ~ .bar,
#foo:checked ~ .bar {
display: inline-block;
}
[for="bar"] {
color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<input type="checkbox" id="foo">
<label for="foo">foo</label>
<br/>
<br/>
<span class="bar">bar</span>&nbsp;
<input type="checkbox" id="bar">
<label id="close" for="bar">x</label>

JSFIDDLE http://jsfiddle.net/4wr3da8p/2/