Question

我有以下HTML。

基本上它是一个contentaditable 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
});

我的猜测是检查e是否有可疑的div触发了事件。

但我似乎无法让它发挥作用。

如果我点击contenteditable div，我会收到警告'no'，这应该是肯定的。

如果我点击.color-picker || .color-switch我也警觉'不'这很好。

先谢谢你帮助我。

Answer 1

JavaScript属性是camelcase，它应该是contentEditable，如下所示：

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

You can test it out here

Answer 2

您可以使用属性选择器：

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

仅在由contenteditable div触发的单击时执行操作

2 个答案: