jQuery stopPropagation()?

Question

Daha önce hiç rastlamadan kimse bana herhangi bir işaretçi verebilir mi?

Bir beyaz tahta üzerine notlar göndermek gibi notlar yapmak için bir web uygulaması oluşturuyorum. Şu anda, spawn butonu notalar üretecek ama bunu yapmak istedim ki, kullanıcı tuval üzerinde herhangi bir yere tıklayabilsin (beyaz tahta) ve bu pozisyonda yeni bir nota basacak. İşte

bunun için kod şudur: -

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

}); 

sorun ortaya çıktığında notlardan birini tıkladığında, notlar tuval içine her defasında klonlanmış çünkü onun oluşturmayı unutmayın tıkladığında başka bir not. Bu davranışı durdurmak ve bir kullanıcı boş bir tuval alanını tıkladığında SADECE bir not oluşturmak istiyorum. Haksızlığı durdurmayı, Durdurmayı durdurmayı ve durdurmayı denedim ... ama hiçbirinin bir etkisi yok gibi görünüyor.

Ayrıca bunları, not tıklaması gibi diğer eylemlerde de denedim, ancak doğru yerde doğru olanı göremiyorum. ya da bunu tamamen yanlış yoldan mı yapıyorum? Burada

örnek:

http://www.kryptonite-dove.com/sandbox/animate

GÜNCELLEME: Bu notlar artık not sınıfına hiçbir tıklama eylemleri engeller ancak kabardığını sorununu çözdü

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

, ben varım Burada bilinmeyen sular! Not başlık ve metin için geri tıklama eylemleri geri almak için nasıl herhangi bir işaretçi takdir ediyorum :)

Answer 1

Eğer #canvas üzerinde tıklamasında şey yapmak istiyorum, ancak tıklama #canvas üzerinde değil, onun çocuklar üzerinde doğrudan yalnızca, o zaman sizin için kullanılabilir iki ana seçenek vardır:

1. Güncellemenize bağlı olarak, her bir çocuğa tıklamayı kaldırabilir ve # kampana kadar yaymayı durdurabilir, ancak tabi ki çocuklar için yapmak isteyebileceğiniz diğer işlemleri karmaşık hale getirebilirsiniz. Olayı başlatan DOM öğesinin #canvas öğeniz olup olmadığını görmek için event.target property'u sınayın. ayrıca (eldeki probleme ilgisiz) belirterek Yani

yapabilirsiniz ve gereken zincir jQuery yöntemleri yerine aynı elemanını yeniden seçilmesi:

İşte

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

}); 

Bir demo var (ile senin JS çok versiyonudur, temelde sadece bu cevaptan fonksiyon ve stilleri): http://jsfiddle.net/H6XrW/

(hiç hemarasında aramaya gerek olmadığını unutmayınve .stopPropagation(), daha önce sizin için örtülü olarak çağırır.)

Answer 2

Notları tıklarken yayılmasını durdurmanız gerekir, böylece çocuklardan biri olduğunda #canvas öğesinin bildirilmemesi gerekir tıklanır (#insertAfter'un #canvas numaralı bir çocuk olduğunu varsayarak). Her yeni nota bir tık işleyicisi takın, o kadar köpüren gelen olayı önler:

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

Answer 3

yeni notlar oluşturmasını notları tıklandığını durur Bu kod: Herhangi tıklama durdurarak çalışır

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

tuval div'a kadar yayılan notalarda.

Answer 4

Biraz jquery noob var, bu yüzden bunu yapmanın daha iyi bir yolu olabilir, ancak aşağıdakileri test ettim ve benim için çalışıyor. Daha iyi bir şey yapabilseydim başkalarından duymak isterdim. HTML'ye veya CSS'ye dokunmadım.

// ----------------- 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

DurEventPropagation çağrısını tuvalin içine koyarsanız, click olayının yalnızca CANVAS VANALARI'na yayılmasını önlersiniz. Tıklama, DOM'da iç elemandan "hareket eder". notlar hala artık, fikir köpüren olan,

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