Javascript 流星事件选择器，用于更复杂的事件

我正在尝试让meteorjs中的事件处理程序按预期工作：

• 白框应该是可点击的，如果点击了，我需要调用一个关闭或打开章节的函数
• 单击灰色文本（即

  contenteditable

  ）时，您应该能够编辑该

  contenteditable

  ，并具有一个类

  .editable

我的问题：我声明了一个事件处理程序，如下所示：

Template.chapterBox.events:
   'click .chapter-box': (e) ->
      do_some_stuff()

<template name="ChapterBox">
  <div class="chapter-box">
    <div class='editable'>Text</div>
  </div>
</template>

Template.ChapterBox.events({
  'click .chapter-box': function (event, template) {
    event.stopPropagation();
    console.log("clicked chapter-box: ", event.currentTarget);  
  },

 'click .editable': function(event,template){
    event.stopPropagation();
   console.log("clicked editable: ", event.currentTarget);  
  }
});

当我单击contenteditable进行编辑时，如何防止上述事件处理程序触发

我已经在事件处理程序的第一行讨论过类似的内容

if $(e.target).hasClass("editable"):
  return;

---

但它不起作用

您可以这样做：

Template.chapterBox.events:
   'click .chapter-box': (e) ->
      do_some_stuff()

<template name="ChapterBox">
  <div class="chapter-box">
    <div class='editable'>Text</div>
  </div>
</template>

Template.ChapterBox.events({
  'click .chapter-box': function (event, template) {
    event.stopPropagation();
    console.log("clicked chapter-box: ", event.currentTarget);  
  },

 'click .editable': function(event,template){
    event.stopPropagation();
   console.log("clicked editable: ", event.currentTarget);  
  }
});

正文
Template.ChapterBox.events({
“单击章节框”：函数（事件、模板）{
event.stopPropagation（）；
log（“单击章节框：”，event.currentTarget）；
},
“click.editable”：函数（事件、模板）{
event.stopPropagation（）；
日志（“单击可编辑：”，event.currentTarget）；
}
});

检查此项以获得一个工作示例

---

防止事件在DOM树中冒泡，防止任何父处理程序收到事件通知。

您可以执行以下操作：

Template.chapterBox.events:
   'click .chapter-box': (e) ->
      do_some_stuff()

<template name="ChapterBox">
  <div class="chapter-box">
    <div class='editable'>Text</div>
  </div>
</template>

Template.ChapterBox.events({
  'click .chapter-box': function (event, template) {
    event.stopPropagation();
    console.log("clicked chapter-box: ", event.currentTarget);  
  },

 'click .editable': function(event,template){
    event.stopPropagation();
   console.log("clicked editable: ", event.currentTarget);  
  }
});

正文
Template.ChapterBox.events({
“单击章节框”：函数（事件、模板）{
event.stopPropagation（）；
log（“单击章节框：”，event.currentTarget）；
},
“click.editable”：函数（事件、模板）{
event.stopPropagation（）；
日志（“单击可编辑：”，event.currentTarget）；
}
});

检查此项以获得一个工作示例

---

防止事件在DOM树中冒泡，防止任何父处理程序收到事件通知。

我也遇到了同样的问题，这对我很有效：

if (e.target.className == "editable") {
  console.log("clicked editable");
} else {
  console.log("clicked chapter-box");
}

---

我也有同样的问题，这对我很有效：

if (e.target.className == "editable") {
  console.log("clicked editable");
} else {
  console.log("clicked chapter-box");
}

---

谢谢你的安慰。这让我觉得。。。最后，jQuery的Dragable和Sortable破坏了contenteditable的功能。谢谢你的解答。这让我觉得。。。最终，jQuery的Dragable和Sortable破坏了contenteditable的功能。