jquery - 是否可以抑制父母的 :active 伪类？

Question

我有以下标记：

<div class="parent">
  I should change my color to green when clicked
  <div class="element">I should do nothing when clicked</div>
</div>

这是相关的CSS：

.parent {
  width:200px;
  height:200px;
  background: red;
  color: #fff;
}
.parent:active {
  background:green;
}
.element {
  background:blue;
}

有什么方法可以防止点击时触发.parent的:active伪类.element？尝试点击e.stopPropogation()时.element没有运气。 演示

Answer 1

您可以只使用 jQuery 而不是:active，就像在这个演示（链接）中一样。

$('.element').mousedown(function(e){
  e.stopPropagation();
});

$('.parent').mousedown(function(e){
  $('.parent').css('background', 'green')
    }).mouseup(function(e){
  $('.parent').css('background', 'red')
});

Answer 2

如何在父母上介绍一个额外的课程，例如allow-active

<div class="parent allow-active">

然后修改你的css.parent:active变成

.parent.allow-active:active {
    background:green;
}

这意味着只有当 div 有parent和allow-active类时颜色才会改变

然后用一点 jQuery 来切换allow-active类

$('.element').mousedown(function(e){
    $('.parent').removeClass('allow-active');
}).mouseup(function(e){
    $('.parent').addClass('allow-active');
});

Answer 3

Doorknob 的替代解决方案是使用event.target：

$('.parent').mousedown(function(e){
    if ($(e.target).is(this))
        $('.parent').css('background', 'green');
}).mouseup(function(e){
    if ($(e.target).is(this))
        $('.parent').css('background', 'red');
});

演示。

Answer 4

可以用js

$(document).ready(function(){
    $(".parent").click(function(){
$(this).css("background","green")
    });
   $(".parent .element").click(function(e) {
       return false;
   });
});

和CSS

.parent {
  width:200px;
  height:200px;
  background: red;
  color: #fff;

}
.parent:active {

}
.element {
  background:blue;

}

HTML 是一样的