JQuery event.stopPropagation() çalışmıyor

Question

Benim html'de li içinde gömülü sınıf bir dragHandle var.

$(".tree li").click(function(event) { 
    alert("click"); 
    event.stopPropagation(); 
}); 

$(".dragHandle").mousedown(function(event) { 
    alert("down"); 
    event.stopPropagation(); 

}); 

$(".dragHandle").mouseup(function(event) { 
    alert("Up"); 
    event.stopPropagation(); 

}); 

Ben mouseDown ve eleman üzerine fare yukarı ben aşağı ve yukarı uyarılar alabilir ancak ben de li en tıklama uyarısı almak şöyledir:

<div class='treeView'> 
    <ul class='tree'> 
     <li><span class="dragHandle"></span>Item 1 
      <ul> 
       <li><span class="dragHandle"></span>Item 2 <a href="#">link</a></li> 
      </ul> 
     </li> 
</ul> 

jQuery kullanarak olay işleyicileri takmak olay işleyicisi de. Bunun mousedown ve mouseup işleyicilerinde event.stopPropagation çağrısıyla engellenmesi gerektiğini düşündüm. DragHandle'da mousedown/up etkinlikleri için çağrılan tıklama etkinliğini nasıl durdurabilirim?

TIA, Adam

Answer 1

nasıl dragHandle üzerinde mousedown/yukarı olaylar için çağrılan click olayını durdurabilirim?

$(".dragHandle").click(function(event) { event.stopPropagation(); }); 

Burada anahtar click, mousedown ve mouseup ayrı olaylar olduğudur:

Sen o olay ... yakalayabilir ... ve ye. Her ne kadar click'u mousedown ve ardından mouseup olarak düşünebilirsiniz, bununla birlikte, mousedown ve mouseup kombinasyonlarının yanı sıra, fareyi bile içermeyen kullanıcı eylemleri tarafından tetiklenen click olayları olabilir. Herhangi bir click olayları. Bu bir kapatma ve delege DragDropHandler-nesneye taşıma olay yaratan

(function() { 
    var DragDropHandler = { 
     isDrag: false, 

     mouseDownHandler: function (event) { 
     alert("down"); 
     event.stopPropagation(); 
     this.isDrag = true; 
     }, 

     mouseUpHandler: function (event) { 
     alert("Up"); 
     event.stopPropagation(); 
     this.isDrag = false; 
     }, 

     clickHandler: function (event) { 
     event.stopPropagation(); 
     // Check if we've already received a mouseDown-event. If we have, 
     // disregard the click event since we want drag-functionality 
     if(this.isDrag) { return; } 
     alert("click"); 
     } 
    }; 

    $(".tree li").click(function(event) { 
     DragDropHandler.clickHandler.call(DragDropHandler, event); 
    }); 
    $(".dragHandle").mousedown(function(event) { 
     DragDropHandler.mouseDownHandler.call(DragDropHandler, event); 
    }); 
    $(".dragHandle").mouseup(function(event) { 
     DragDropHandler.mouseUpHandler.call(DragDropHandler, event); 
    }); 
})(); 

:

Answer 2

Basit wrapper- fare aşağı izler "sınıfı" ve olaylar yukarı oluşturabilir. bu öğesinin kendi yöntemleri içindeki DragDropHandler nesnesine başvurduğundan emin olmak için function.call (ilk parametre bağlamdır) kullandığımı unutmayın. Küresel alandan erişilemeyen bir anonim işlev oluşturduğumuz için, wrapper olay işleyicilerinde DragDropHandler referansını kullanmanın kabul edilebilir olduğunu düşünüyorum.