Effectuer une action uniquement si le clic est déclenché par div divisible

Question

J'ai le code HTML suivant.

Fondamentalement, il s'agit d'un div contentaditable avec le texte texte en elle.

Également dans le div sont deux autres divs sur lesquels l'utilisateur peut cliquer.

<div class="test" contenteditable="true">Text 
    <div class="color-picker"> 
    <img src="/style/icons/color_swatch.png" alt="Color picker" title="Pick a color"> 
    </div> 

    <div class="color-swatch" contenteditable="false"> 
    <div class="pane"> 
     <div style="background: #000000;"></div> 
    </div> 
    <div class="pane" "=""> 
     <div style="background: #990000;"></div> 
    </div> 
    </div> 
</div> 

Je les suivantes Jquery qui n'a besoin que d'effectuer une tâche lorsque l'utilisateur clique dans les div contenteditable et non ses enfants (par exemple .color-sélecteur/.color-swatch). Je pense que c'est de vérifier si la div contenteditable a déclenché l'événement.

Mais je n'arrive pas à le faire fonctionner.

Si je clique dans la div contented, j'obtiens une alerte 'non', ce qui devrait être oui.

Si je clique dans le sélecteur .color || .color-switch Je reçois aussi l'alerte 'non' ce qui est bien.

Merci d'avance de m'avoir aidé.

Answer 1

propriété Le JavaScript est camelcase, il devrait être contentEditable comme ceci:

$('div.test').mouseup(function(e) { 
    if(e.target.contentEditable == 'true') { 
    alert('yes'); 
    } else { 
    alert('no'); 
    } 
}); 

You can test it out here.

Answer 2

Vous pouvez utiliser le sélecteur d'attribut:

$("div[contenteditable='true']").mouseup