jQuery stopPropagation（）？

从来没有遇到过这件事有人能给我指点吗

我正在创建一个web应用程序，用于制作笔记，比如在白板上发布笔记。目前，“生成”按钮将生成注释，但我希望这样做，以便用户可以单击画布上的任何位置（白板），并在该位置生成新注释

以下是代码：-

$("#canvas").bind('click', function(e){

// Calculate offset for width, put box to the left top corner of the mouse click.
   var x = e.pageX + "px";
   var y = e.pageY + "px";

$("#note").clone().insertBefore("#insertAfter").attr("id", "note" + noteID).show();
    $("#note" + noteID).children(".title").text("Note " + noteID);
        $("#note" + noteID).css({left:x, top:y, "z-index" : zindex});

    noteID++;
    zindex++;

e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();

});

当用户单击其中一个注释时会出现问题，因为每次用户单击该注释时，注释都会克隆到画布中，从而创建另一个注释。我想停止这种行为，只在用户单击空白画布区域时创建注释。我试过预防，停止传播和立即停止。。。但他们似乎都没有任何影响力

我也尝试过其他动作，比如点击便笺，但似乎无法在正确的位置找到正确的动作？还是我完全走错了路

示例如下：

更新：

$('#canvas').on('click', '.note', function(e) {
    e.stopPropagation();
});

---

这解决了notes冒泡的问题，但是现在它阻止了notes类上的任何单击操作，我在这里是未知水域！如果有任何关于如何使单击操作恢复对注释标题和文本的工作的指针，我们将不胜感激：）

您需要在单击注释时停止传播，以便在单击其子元素时不会通知

\canvas

元素（我假设

\insertAfter

是

\canvas

的子元素）. 将单击处理程序附加到每个新便笺，以防止事件冒泡：

$("#note" + noteID).click(function (e) {
    e.stopPropagation();
});

---

此代码将阻止单击注释创建新注释：

$("#canvas").bind('click', function(e){

// Calculate offset for width, put box to the left top corner of the mouse click.
   var x = e.pageX + "px";
   var y = e.pageY + "px";

    $("#note").clone().insertBefore("#insertAfter").attr("id", "note" + noteID).show();
    $("#note" + noteID).children(".title").text("Note " + noteID);
    $("#note" + noteID).css({left:x, top:y, "z-index" : zindex});

    noteID++;
    zindex++;
});

$('#canvas').on('click', '.note', function(e) {
    e.stopPropagation();
});

---

它的工作原理是阻止对注释的任何单击传播到画布分区。

我有点jquerynoob，因此可能有一种更简洁的方法来实现这一点，但我已经测试了以下内容，它对我来说是有效的。如果我能做得更好的话，我很想听听别人的意见。我没有接触HTML或CSS

// ----------------- BRING TO FRONT ------------------- 

$(".note").live("click", function (e) {
    console.log("Note click");
    $(this).css({"z-index" : zindex}); //Increment zindex
        zindex++;

    indexPos = $(this).css("zIndex"); // Get current z-index value
    e.stopPropagation();
});

// ----------------- CLONE NOTE ELEMENT -------------------


$(document).on("click", "#canvas, .clone", function(e){

    var left; 
    var top; 

    if ($(this).hasClass("clone")) {
        // If the button fired the click put the note at the top of the viewport
        console.log("Button click");
        left = 0 + noteOffset;
        top = 50 + noteOffset;
        noteOffset = noteOffset + 15;
    } else {
        // If the canvas fired the click put the note on the current mouse position
        console.log("Canvas click");
        left = e.pageX + "px";
        top = e.pageY + "px";
    }

    $("#note").clone().insertBefore("#insertAfter").attr("id", "note" + noteID).show()
        .children(".title").text("Note " + noteID).end().css({
            left: left, 
            top: top, 
            "z-index": zindex
        });

    noteID++;
    zindex++;

});


// ----------------- REMOVE NOTE ELEMENT -------------------

$(".close").live("click", function (e) {
    console.log("Close click");
    $(this).parent().remove();
    e.stopPropagation();
});

---

如果您想在“单击画布”上执行某些操作，但仅当单击直接在“画布”上而不是在其子项上时，您可以使用以下两个主要选项：

根据您的更新，您可以处理对每个孩子的点击，并阻止其传播到#画布，但当然，这会使您可能希望为孩子执行的其他处理复杂化

测试以查看启动事件的DOM元素是否是您的#canvas元素

因此，还要注意（与当前问题无关）您可以而且应该链接jQuery方法，而不是重新选择相同的元素：

$("#canvas").bind('click', function(e){

   // if the clicked element wasn't #canvas return immediately
   if (e.target != this)
      return;

   // Calculate offset for width, put box to the left top corner of the mouse click.
   var x = e.pageX + "px";
   var y = e.pageY + "px";

   $("#note").clone().insertBefore("#insertAfter")
                     .attr("id", "note" + noteID)
                     .css({left:x, top:y, "z-index" : zindex})
                     .show()
                     .children(".title").text("Note " + noteID);

   noteID++;  
   zindex++;

   // You may not need any of the following any more (depending on
   // what your other requirements are)
   e.preventDefault();
   e.stopPropagation();
   e.stopImmediatePropagation();

});

这里有一个演示（你的JS版本精简了很多，基本上就是这个答案中的功能和你的风格）：

---

（请注意，您永远不需要同时调用

.stopImmediatePropagation（）

和

.stopPropagation（）

，因为前者隐式地调用后者。）

如果将stopEventPropagation调用放在画布单击中，则会阻止单击事件仅传播到画布父对象。单击从DOM中的内部元素向上移动

下面是一个带有示例的链接：

---

您尝试过上述方法，但没有任何乐趣，但仍在播放，还有其他想法吗？这可以阻止传播，非常感谢！）然而。。注释上的其他每一次单击操作现在也不起作用。感觉就像它走到了一起，但仍然缺少一些东西！如果您假设

note

类存在，那么您可能应该这么说。否则，这种方法是我的简化示例的一个更优雅的版本+1!@难以捉摸我检查了包含note类的示例。非常感谢！！精彩的解释、精简的代码和JS fiddle为您赢得了胜利：）