Czy można ukryć rodzica: aktywna pseudo-klasa?

Question

Mam następujących znaczników:

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

Oto związane CSS:

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

Czy istnieje jakiś sposób, aby zapobiec wyzwalanie .parent „s klasy :active pseudo gdy .element kliknięciu? Próbowałem e.stopPropogation() po kliknięciu .element bez powodzenia. demo

Answer 1

Można po prostu użyć jQuery zamiast :active, podobnie jak w tym 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

możliwe js

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

i css

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

} 
.parent:active { 

} 
.element { 
    background:blue; 

} 

HTML jest sama

Answer 3

Alternatywnym rozwiązaniem Doorknob byłaby pomocą 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

powiesz na rodzica wprowadzić dodatkową klasę np allow-active

<div class="parent allow-active"> 

Potem zmieniają swoją css tak .parent:active staje

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

Znaczenie koloru tylko zmiany, jeśli div ma zarówno parent i allow-active klas

Następnie trochę jQuery, aby przełączyć allow-active klasa

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