Detener la propagación de mousedown/mouseup desde un controlador de clic

Question

Here's a DEMO.

tengo dos divs, uno interno y otro externo:

<div id="outer"> 
    <div id="inner"></div> 
</div> 

Con un poco de CSS para que pueda ver cuál es cuál:

#outer { 
    width: 250px; 
    height: 250px; 
    padding: 50px; 
    background: yellow; 
} 

#inner { 
    width: 250px; 
    height: 250px; 
    background: blue; 
} 

trato de detener la propagación de mousedown y mouseup eventos desde dentro de un controlador click como lo siguiente:

$('#inner').on('click', function(e) { 
    e.stopPropagation(); 
    $(this).css({'background': 'green'}); 
    return false; 
}); 

$('#outer').on('mousedown', function(e) { 
    $(this).css({'background': 'green'}); 
}); 

$('#outer').on('mouseup', function(e) { 
    $(this).css({'background': 'yellow'}); 
}); 

Esto no parece posible. Lo que hace el trabajo está llamando desde dentro .stopPropagation otros mousedown y mouseup llamadas, como se muestra aquí (another DEMO):

$('#inner').on('mousedown', function(e) { 
    e.stopPropagation(); 
    return false; 
}); 

$('#inner').on('mouseup', function(e) { 
    e.stopPropagation(); 
    return false; 
}); 

que ya puede haber respondido a mi propia pregunta, pero no estoy seguro si mi enfoque es el mejor o más razonable. ¿Es esta la manera correcta de detener un evento que burbujea hasta mousedown y mouseup?

Answer 1

Sí. Dado que el mouseclick y el mousedown/mouseup son eventos diferentes, no se puede obtener uno de otro: tienes que hacerlo desde dentro de tus propios manejadores de mousedown/mouseup. Lo que puedes hacer es refactorizar eso en un método genérico para usar en ambos lugares:

stopPropagation('#inner', 'mousedown'); 
stopPropagation('#inner', 'mouseup'); 

function stopPropagation(id, event) { 
    $(id).on(event, function(e) { 
     e.stopPropagation(); 
     return false; 
    }); 
}