jQuery stopPropagation ()?

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();

});

Проблема возникает, когда пользователь нажимает на одну из заметок, поскольку заметки клонируются на холст каждый раз, когда пользователь нажимает на заметку, создавая другую заметку. Я хочу остановить это поведение и создать ТОЛЬКО заметку, когда пользователь нажимает на пустую область холста. Я пытался предотвратить, по умолчанию, остановить распространение и остановить немедленное ... но ни один из них, кажется, не имеет никакого влияния.

Я также пробовал их на других действиях, таких как щелчок примечания, но просто не могу найти нужное в нужном месте? или я иду по этому пути совершенно неправильно?

пример здесь:

http://www.kryptonite -dove.com / Песочница / одушевленные

UPDATE:

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

Это решило проблему пузырей заметок, однако теперь оно предотвращает любые действия щелчка по классу заметок, я здесь в неизведанных водах! Буду признателен за любые указания о том, как вернуть действия щелчка для заголовка и текста заметки:)

Answer 1

Если вы хотите что-то сделать по клику на #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(), так как первый неявно вызывает для вас последний.)

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

Если вы поместите вызов stopEventPropagation внутри щелчка, вы предотвратите распространение события click только на РОДИТЕЛЕЙ CANVAS.Клик «перемещается» от внутреннего элемента вверх в DOM.

Вот ссылка с примером:

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

Answer 5

Я немного 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();
});