Question

我有一个菜单，要添加悬停并单击事件。

$('a').hover(function(){
    $(this).css('background', 'red');
}, function(){
    $(this).css('background', '');
});

$('a').click(function(){
    $(this).css('background', 'green');
});

这是演示： https://jsfiddle.net/u2dn68bg/18/

如何停止我的悬停事件覆盖点击事件？即，如果我已经单击了某个元素，则不应为该单击的元素触发悬停事件。

Answer 1

使用CSS规则并切换类。

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

a.active, a.active:hover {
  background-color: green;
}

a:hover {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
<a href="#">Four</a>

根据您的评论不使用CSS，这是一种不良的设计模式。...

$("a").on("click", function (e) {
  e.preventDefault();
  let color = ''
  if (!this.dataset.active) {
    this.dataset.active = 1
    color = 'green'    
  } else {
    delete this.dataset.active
  }
  this.style.backgroundColor = color;
}).on("mouseenter mouseleave", function (e) {
  if (this.dataset.active) return
  const color = e.type === "mouseenter" ? "red" : ""
  this.style.backgroundColor = color;
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
<a href="#">Four</a>

Answer 2

单击元素时切换CSS类。悬停时，仅在元素没有特定类的情况下更改背景。

$('a').hover(function(){
    !$(this).hasClass('clicked') && $(this).css('background', 'red');
}, function(){
    !$(this).hasClass('clicked') && $(this).css('background', '');
});

$('a').click(function(){
    $(this).css('background', 'green').toggleClass('clicked');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-inline menu list-unstyled">
  <li><a href="#">Section 1</a></li>
  <li><a href="#">Section 2</a></li>
  <li><a href="#">Section 3</a></li>
</ul>

菜单管理悬停和单击事件

2 个答案: