Question

我有几个项目已经通过点击它们获得.active课程。现在，我不需要在任何.active课程中发生任何点击事件。我有很多点击功能，可以生成项目active。因此，为了防止点击活动类，我在其他地方编写了prevent函数，并在每个单击函数中调用它们。但是，它没有用。

$('body').on('click', '#one', function() {  
   $(this).addClass('active');
   // do something more
    noClickOnActive();
});
$('body').on('click', '#two', function() {  
   $(this).addClass('active');
   // do something more
    noClickOnActive();
}); 

function noClickOnActive() {
    $('body').on('click', '.content.active', function(event) {  
        event.preventDefault()
        event.stopPropagation();
    }); 
};

如何让它运作？

Fiddle work

Answer 1

使用下面的代码。使用jquery hasClass()函数，您可以检查元素是否具有类。它返回true / false。

DEMO

 $('body').on('click', '#one', function() {  
   if($(this).hasClass('active')){
      return false;
   }
   $(this).addClass('active');
    alert('clicked');
 });

Answer 2

事件处理程序按其注册顺序工作。因此，您可能需要在active类上将此防止默认事件放在所有其他点击事件的顶部。

$('body').on('click', '.content.active', function(event) {  
    event.preventDefault()
    event.stopPropagation();
}); 

//Other event handlers code must be below

将事件绑定到.content并检查那里的课程

 $('body').on('click', '.content', function(event) {  
if($(this).hasClass("active")) {
    event.preventDefault()
    event.stopPropagation();
 } else {
     $(this).addClass("active");
 }
});

.content {
display: inline-block;
border: 1px solid yellow;
margin-right: 10px;
padding: 5px;
}
.content:hover {
cursor: pointer;
}
.content.active {
background: yellow;
cursor: inherit;
}

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="content" id="one">
<p>Click Me</p>
</div>
<div class="content" id="two">
<p>Another Click Me</p>
</div>

Answer 3

如果点击是问题，那就意味着它有一些与之相关的行动。从元素中删除动作会解决问题吗？与点击一样，将链接设置为＆＃34;＆＃34;。

或者只是在输入和链接中添加if语句。如果你不是很多，那就不是一项艰巨的任务。

如何使用jQuery防止在另一个单击事件中活动类上的单击事件

3 个答案: