是否可以抑制父進程：活動僞類？

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點擊沒有運氣。 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

可能與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 3

的替代解決方案門把手的將被使用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。

Answer 4

如何父引入額外的類如allow-active

<div class="parent allow-active"> 

然後修改你的CSS所以.parent:active成爲

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

這意味着如果只改變div有兩個parent和allow-active類的顏色

然後有點jQuery來切換allow-active class

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