Perform action only if click triggered by contenteditable div

I have the following HTML.

Basically it is a contentaditable div with the text Text in it.

Also in the div are two other divs on which the user can click.

<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>

I have the following Jquery that only needs to perform a task when the user clicks in the contenteditable div and not its children (e.g. .color-picker / .color-swatch).

$('div.test').mouseup(function(e) {
  if(e.target.contenteditable=='true') {
    alert('yes');
  } else {
    alert('no');
  }
  // do action only if triggered by contenteditable div
});

My guess is to check e whether the contenteditable div triggered the event.

But I can't seem to get it working.

If I click in the contenteditable div I get an alert 'no', which should be yes.

If I click in the .color-picker || .color-switch I also get开发者_运维百科 alert 'no' which is good.

Thanks in advance for helping me out.

The JavaScript property is camelcase, it should be contentEditable like this:

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

You can test it out here.

You can use the attribute selector:

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