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

E.g。

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

--- --- EDIT

为每个附加元素设置.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/

停止从child到parent jQuery的传播

1 个答案: