Остановка распространения mousedown / mouseup из обработчика кликов

Question

Вот ДЕМО .

У меня есть два 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, как показано здесь ( еще один 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. То, что вы можете сделать, это преобразовать его в универсальный метод для использования в обоих местах:

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

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