javascript - 如何在禁用点击时保持悬停属性

Question

所以我有这个列表，通过 CSS 添加了一些悬停效果。HTML：

<li><a href="#">Current Period</a>
  <ul>
        <li><a href="#">2012</a>
        <li> a href="#">2011</a> //...you get the point

CSS：

#nav a:hover {
    background-color: #fff;
    color: #333;
}

当用户将鼠标悬停在当前时间段上时，会出现一个子元素列表（2012、2011 ......它们有自己的子元素）。我的问题是用户可以点击“当前期间”。我已经设法通过向锚添加一个类来删除点击，如下所示：

<li><a href="#" class="noclick">Current Period</a> ....

CSS：

.noclick { pointer-events: none; cursor: default; }

但这当然会删除悬停功能。我想在使按钮不可点击的同时保持悬停效果（我在想javascript，但我想要一个更“直接”的解决方案）。我很感激任何帮助:)

Answer 1

在您的单击处理程序中测试单击的项目是否具有该类：

$("#nav a").click(function(e){
     if ($(e.target).hasClass("noclick"))
         return false;

     // your other code here
});

请注意，通过测试事件的target元素，您不会阻止对子元素的点击工作。

或者，如果“noclick”类没有动态更改，即那些“noclick”链接以“noclick”开头并将始终为“noclick”，您可以更改选择器，以便您的点击处理程序不会绑定到这些特定元素：

$("#nav a").not(".noclick").click(function() { ...

Answer 2

你有没有尝试过？

$('.noclick').unbind('click');

或者

$('.noclick').click(function(e){e.preventDefault();});

或者

<a href="javascript:void(0);">Text</a>

Answer 3

只需更改以下行：

<li><a href="#" class="noclick">Current Period</a> ....

对于这个

<li><a href="#" class="noclick" onclick="return false;">Current Period</a> ....

并更改您的以下 CSS：

.noclick { pointer-events: none; cursor: default; }

对于这个

.noclick { cursor: default; }

那应该做你想做的事。

Answer 4

您可以使用 noClick 类来阻止默认事件

('.noclick').on('click' , function(e) {
     e.preventDefault();
});

Answer 5

在 .noclick 类上删除指针事件

.noclick { cursor: default; }

并将 js 添加到 .noclick 元素

$('.noclick').each(function() {
    var $this = $(this);
    $this.hover(function() {
        // do something...
    });
    $this.click(function() {
        return false;
    });
});