javascript - 停止从子级到父级 jQuery 的传播

Question

我在这里没有看到明显的东西？我已经看到了数十种针对类似问题的解决方案，但它们都不起作用。

$(document).ready(function() {        
  $(".init-tutorial").on("click", function(e){
    var template = $(".pointer.template");
    var posX = e.pageX - $(this).position().left - 8,
      posY = e.pageY - $(this).position().top - 8;    

    template
      .clone() 
      .removeClass("template")
      .css({"top":posY,"left":posX}).attr("tabindex",-1)
      .appendTo($(this)).focus();
  });
  $(document).on("click", ".comments", function(e){
    e.stopPropagation();
  });
});

问题是附加的 .template(包含 .comments)将所有点击传播到父 el，这是不可取的。

我能够阻止它的唯一方法是使用 if (e.target === this) - 但这会给我带来另一组问题，因为我有多个应该接收的元素事件。

模板标记:

<div class="pointer template" style="">
  <div class="comments">
    <div class="panel panel-default">
      <div class="panel-body">
        <textarea class="form-control" rows="3" placeholder="კომენტარი"></textarea>
        <button type="button" class="btn btn-success btn-block">დაპოსტე</button>
      </div>
    </div>
  </div>
</div>

关于容器div，没什么特别的

<div class="init-tutorial" style="height:400px;width:400px;background-color:red;"></div>

jsfidle:http://jsfiddle.net/9cjrp079/

Answer 1

$(document).on("click", ".comments", function(e){
  e.stopPropagation();
});

IMO，当触发此代码时，事件已经传播到$(document)。您可能必须将 onclick 监听器直接附加到 $(".comments")，而不是 $(document)。

例如

$(".comments").on("click", function(e){
  e.stopPropagation();
});

---编辑---

为每个附加元素设置.click:

template
  .clone()
  .removeClass("template")
  .css({"top":posY,"left":posX}).attr("tabindex",-1)
  .appendTo($(this))
  .focus()
  .click(function(e){
    e.stopPropagation();
  });

jsfiddle:http://jsfiddle.net/9cjrp079/1/