È possibile sopprimere parentesi: pseudo classe attiva?

Question

Ho il seguente markup:

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

Ecco il relativo CSS:

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

Esiste un modo per evitare innescare .parent 's classe :active pseudo quando .element viene cliccato? Provato e.stopPropogation() quando si fa clic su .element senza fortuna. demo

Answer 1

Si può semplicemente utilizzare jQuery invece di :active, come in questo 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

possibile con js

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

e css

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

} 
.parent:active { 

} 
.element { 
    background:blue; 

} 

HTML è lo stesso

Answer 3

Una soluzione alternativa alla maniglia di essere l'utilizzo del 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

Scegliendo per il genitore introdurre una classe in più ad esempio allow-active

<div class="parent allow-active"> 

Poi modificare il CSS in modo .parent:active diventa

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

Significato del colore solo le modifiche se il div ha sia parent e allow-active classi

Quindi un po 'di jQuery per attivare il allow-active classe

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