javascript - 停止从单击处理程序传播 mousedown/mouseup

Question

Here's a DEMO .

我有两个 div，一个内部和一个外部:

<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;
}

我尝试停止从 click 处理程序中传播 mousedown 和 mouseup 事件，如下所示:

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

这似乎不可能。起作用的是从其他 mousedown 和 mouseup 调用中调用 .stopPropagation，如下所示 ( 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 处理程序中执行此操作。您可以做的是将其重构为在两个地方都使用的通用方法:

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

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