jQuery stopPropagation ()?

никогда не сталкивался с этим, прежде чем кто-нибудь может дать мне какие-либо указатели?

Я создаю веб-приложение для создания заметок, таких как post it notes на доске. На данный момент кнопка spawn будет порождать заметки, но я хочу сделать это так, чтобы пользователь мог щелкнуть в любом месте на холсте (доске), и он породит новую заметку в этой позиции.

вот код для этого: -

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

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

6
jquery jquery-ui stoppropagation user-interface

5 ответов

если вы хотите что-то сделать при нажатии на #canvas, но только если щелчок находится непосредственно на #canvas, а не на его потомках, то вам доступны два основных варианта:

  1. в соответствии с вашим обновлением вы можете обрабатывать щелчок на каждом дочернем элементе и остановить его распространение до #canvas, но, конечно, это усложняет другую обработку, которую вы можете сделать для детей.

12

этот код остановит клики на заметках от создания новых заметок:

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

3

вам нужно будет остановить распространение при нажатии на заметки, так что #canvas элемент не уведомляется при нажатии одного из его дочерних элементов (я предполагаю, что #insertAfter ребенок #canvas). Прикрепите обработчик щелчка к каждой новой заметке, который предотвращает пузырение события:

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

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

Если вы помещаете вызов stopEventPropagation внутри щелчка холста, вы предотвращаете событие click для распространения только на родителей холста. Щелчок "перемещается" от внутреннего элемента вверх в DOM.

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

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

0