6

从来没有遇到过这个问题，任何人都可以给我任何指示吗？

我正在创建一个网络应用程序来做笔记，比如将笔记贴到白板上。目前，生成按钮将生成注释，但我想这样做，以便用户可以单击画布（白板）上的任何位置，它将在该位置生成一个新注释。

这是代码： -

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

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

4

5 回答 5

12

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

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

  2. 测试event.target属性以查看启动事件的 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()

于 2012-03-24T02:20:59.047 回答
3

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

$("#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。

于 2012-03-23T22:25:59.990 回答
1

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

$("#note" + noteID).click(function (e) {
    e.stopPropagation();
});
于 2012-03-23T22:19:13.407 回答
0

我有点 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();
});
于 2012-03-24T01:03:33.620 回答
0

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

这是一个示例链接：

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

于 2014-08-09T11:48:15.410 回答