停止从点击处理程序传播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;
    });
}