Zatrzymanie propagacji mousedown/mouseup od obsługi kliknięcia

Question

Here's a DEMO.

mam dwa divs, wewnętrzną i zewnętrzną:

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

Z pewnym CSS, dzięki czemu można zobaczyć, co jest czym:

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

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

staram się zatrzymać rozprzestrzenianie mousedown i mouseup wydarzeń z wewnątrz obsługi click, tak:

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

To nie wydaje się możliwe. Co działa dzwoni .stopPropagation od wewnątrz innych mousedown i mouseup połączeń, jak pokazano tutaj (another DEMO):

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

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

mogę już odpowiedział na moje własne pytanie, ale nie jestem pewien, czy moje podejście jest najlepszym . lub najbardziej rozsądne Czy to dobry sposób, żeby zatrzymać zdarzenie propagacji aż do mousedown i mouseup

Answer 1

Tak od MouseClick i mouseDown/mouseUp są różne imprezy, nie można dostać się od siebie w ogóle?. - musisz to zrobić z poziomu własnych programów obsługi mousedown/mouseup do refactor to do ogólnej metody do użycia w obu miejscach:

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

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