web-dev-qa-db-ja.com

クリックハンドラからのマウスダウン/マウスアップの伝播の停止

ここにデモがあります。

内側と外側の2つの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'});
});

これは不可能のようです。ここに示すように、他のmousedownおよびmouseup呼び出し内から.stopPropagationを呼び出すことが機能します（ 別のデモ） =：

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

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

私はすでに自分の質問に答えているかもしれませんが、私のアプローチが最善であるか、最も合理的であるかはわかりません。これは、mousedownとmouseupまでバブリングするイベントを停止する正しい方法ですか？

javascriptjquerymouseevent
15
Josh Smith

はい。 mouseclickとmousedown/mouseupは異なるイベントであるため、一方を他方から取得することはできません。独自のmousedown/mouseupハンドラー内から実行する必要があります。あなたができることは、それを両方の場所で使用する一般的なメソッドにリファクタリングすることです。

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

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