Остановка распространения мышей/мышей из обработчика щелчков

Question

Here's a DEMO.

У меня есть два divs, внутренний и внешний:

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

С некоторыми CSS, так что вы можете увидеть, что есть что:

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

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

Я стараюсь, чтобы остановить распространение mousedown и mouseup событий из-за обработчика click:

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

Это не представляется возможным. Что делает работу звонит .stopPropagation из других mousedown и mouseup вызовов, как показано здесь (another DEMO):

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

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

Возможно, я уже ответил на свой вопрос, но я не уверен, что мой подход является лучшим . или наиболее разумными ли это правильный путь, чтобы остановить событие барботирования до mousedown и mouseup

Answer 1

Да с MouseClick и MouseDown/MouseUp различных событий, вы не можете получить в одном из других вообще?. - вы должны сделать это из своих собственных обработчиков mousedown/mouseup. do является рефактором, который в общий метод используется в обоих местах:

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

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