JQuery event.stopPropagation() no funciona

Question

En mi html tengo un lapso de clase dragHandle incrustado dentro de un li.

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

que asociar controladores de eventos utilizando jQuery como sigue:

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

}); 

Cuando mouseDown y ratón hacia arriba sobre el elemento consigo el arriba y abajo alerta, sin embargo también consigo la alerta clic del li de controlador de eventos también. Pensé que esto debería evitarse mediante la llamada a event.stopPropagation en los manejadores de mousedown y mouseup. ¿Cómo impido que se llame al evento click para eventos mousedown/up en el dragHandle?

TIA, Adam

Answer 1

¿Cómo paro el evento click de ser llamado para mousedown/hasta eventos en el dragHandle?

Usted captura ... y comer ... que evento:

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

La clave aquí es que click, mousedown, y mouseup son eventos distintos. Aunque puede pensar en click como mousedown seguido de mouseup, en realidad puede tener click eventos desencadenados por acciones del usuario que ni siquiera involucran el mouse, así como combinaciones de mousedown y mouseup que no dan como resultado cualquier evento click en absoluto.

Answer 2

Se puede crear un simple "clase" wrapper-, que realiza un seguimiento del ratón hacia abajo y hasta eventos:

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

Esto crea un cierre y el manejo de los delegados a la DragDropHandler-objeto de evento. Tenga en cuenta que he utilizado function.call (el primer parámetro es el contexto) para asegurar que este se refiere al DragDropHandler-object dentro de sus métodos. Como hemos creado una función anónima que no se puede alcanzar desde el espacio global, creo que es aceptable usar la referencia de DragDropHandler dentro de los manejadores de eventos de contenedor.