jQuery stopPropagation()？

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上而不是其子对象上单击时，您可以使用的两个主要选项是：

canvas根据您的更新，您可以处理每个子项上的单击并阻止其向上传播到#

• ，但这当然会使您可能希望对子项执行的其他处理复杂化。

• 测试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的子元素)。为每个新注释附加一个click处理程序，以防止事件冒泡：

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