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的{{1}}伪类？点击.element时没有运气，尝试e.stopPropogation()。 demo

Answer 1

您可以使用jQuery而不是:active，就像在此demo (link)中一样。

$('.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

可以使用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相同

Answer 4

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');
});

Demo

是否有可能抑制parent的：active伪类？

4 个答案: