Question

在任何人都给我任何指示之前，永远不要碰到这个？

我正在创建一个网络应用程序，用于在白板上发布便条。生成按钮会产生音符，但我想制作它以便用户可以单击画布上的任何位置（白板），它会在该位置产生一个新音符。

以下是代码： -

$("#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的子元素1}}）。将点击处理程序附加到每个新笔记，以防止事件冒泡：

$("#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调用放在画布中，则单击即可防止click事件仅传播到CANVAS PARENTS。点击从DOM中的内部元素“移动”。

以下是一个示例链接：

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

jQuery stopPropagation（）？

5 个答案: