javascript - 仅当点击由 contenteditable div 触发时才执行操作

Question

我有以下 HTML。

基本上它是一个内容可编辑的 div，其中包含文本 Text。

在 div 中还有另外两个 div，用户可以点击它们。

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

我有以下 Jquery，它只需要在用户单击 contenteditable div 而不是其子项(例如 .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
});

我的猜测是检查 contenteditable div 是否触发了事件。

但我似乎无法让它工作。

如果我单击 contenteditable div，我会收到“否”警报，这应该是。

如果我点击 .color-picker || .color-switch 我也收到警报“不”，这很好。

在此先感谢您帮助我。

Answer 1

JavaScript 属性是驼峰式的，它应该是 contentEditable 这样的:

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

You can test it out here .