Question

我正在尝试使用on（）事件将click和mouseover事件绑定到链接，实质上是在桌面上具有悬停行为并单击移动设备和平板电脑。我目前的问题是两个事件都是同时触发的。是否可以干净利落地执行此操作，或者我是否只需为屏幕宽度添加条件并将悬停专门应用于桌面，单击移动设备上的活动？基本的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

我怀疑你遇到的是当你第一次将鼠标移动到一个位置进行点击时（但在实际点击之前），“活动”类切换，但是当你点击时，该类切换回关闭。这就是切换操作的问题。

如果您要做的就是在元素变为活动或悬停时应用某个类，并在不是该类时删除该类，则根本不需要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 2

您可以将jquery的tap事件用于移动设备，将鼠标悬停在桌面上

Answer 3

您可以使用附加到<input type="checkbox">和<label>元素的change和#bar个元素，#foo个元素，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/

鼠标悬停和单击事件冲突

3 个答案: