javascript - 用于更复杂事件的 meteor 事件选择器

Question

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

• 白框应该是可以点击的，如果点击了，我需要调用一个关闭或打开章节的函数
• 单击灰色文本(contenteditable <div>)时，您应该能够编辑contenteditable。并且有一个类 .editable

我的问题:我声明了一个这样的事件处理程序:

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

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

我已经在事件处理程序的第一行中提到过类似的内容

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

但是没用

Answer 1

你可以这样做:

<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);  
  }
});

检查这个MeteorPad一个工作示例。

Event.stopPropagation()防止事件在 DOM 树中冒泡，从而防止任何父处理程序收到事件通知。