jQuery 停止传播（）？

Question

以前从来没有遇到过这种情况，谁能给我任何指点？

我正在创建一个 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();

});

当用户单击其中一个便笺时会出现问题，因为每次用户单击便笺时便将便笺克隆到画布中，从而创建了另一个便笺。我想停止这种行为，并且仅在用户单击空白画布区域时创建注释。我已经尝试过 preventDefauly、stopPropagation 和 stopImmediate ......但它们似乎都没有任何影响。

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

这里的例子：

http://www.kryptonite-dove.com/sandbox/animate

更新：

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

这解决了笔记冒泡的问题，但是它现在阻止了笔记类上的任何点击操作，我在这里处于未知领域！将不胜感激有关如何使单击操作恢复为注释标题和文本工作的任何指示:)

Answer 1

如果您想在点击 #canvas 时执行某些操作，但前提是点击直接在 #canvas 上而不是在其子级上，那么您可以使用的两个主要选项是：

1. 根据您的更新，您可以处理对每个孩子的点击并阻止它传播到 #canvas，但这当然会使您可能希望为孩子做的其他处理变得复杂。

2. 测试 event.target property 以查看启动事件的 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 的精简版本，基本上只是这个答案中的功能和您的样式）：http://jsfiddle.net/H6XrW/

（请注意，您无需同时调用.stopImmediatePropagation() 和.stopPropagation() 中的两者，因为前者会为您隐式调用后者。）

Answer 2

此代码将阻止点击笔记创建新笔记：

$("#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();
});

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

Answer 3

您需要在单击注释时停止传播，以便在单击其子元素之一时不会通知#canvas 元素（我假设#insertAfter 是#canvas 的子元素）。为每个新笔记附加一个点击处理程序，以防止事件冒泡：

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

Answer 4

我有点 jquery noob 所以可能有一种更简洁的方法，但我已经测试了以下内容，它对我有用。如果我能做得更好，我很想听听其他人的意见。我没有接触 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();
});

Answer 5

如果您将 stopEventPropagation 调用放在画布单击中，您将阻止单击事件仅传播到 CANVAS PARENTS。点击在 DOM 中从内部元素向上“移动”。

这是一个示例链接：

http://redfishmemories.blogspot.it/2014/08/jquery-prevent-event-propagation-and.html