Arresto della propagazione di mouse/mouseup da un gestore di clic

Question

Here's a DEMO.

ho due divs, una interna ed un'esterna:

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

Con un po 'i CSS in modo da poter vedere che cosa si tratta:

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

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

ho cercare di fermare la propagazione di mousedown e mouseup eventi dall'interno di un gestore click in questo modo:

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

Questo non sembra possibile. Che cosa significa il lavoro sta chiamando .stopPropagation dall'interno di altre mousedown e mouseup chiamate, come mostrato qui (another DEMO):

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

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

io possa avere già risposto alla mia domanda, ma non sono sicuro se il mio approccio è il migliore . o più ragionevole è questo il modo giusto per fermare un evento zampillante per un mousedown e mouseup

Answer 1

Sì dal click del mouse e mousedown/mouseup sono eventi diversi, non è possibile ottenere in una dall'altra a tutti?. - devi farlo dai tuoi stessi gestori di mouse/mouseup fare è refactoring che in un metodo generico da utilizzare in entrambi i posti:

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

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