4

カスタムdropdown（）があるとしましょう。ボタンをクリックするとメニューが表示され、ユーザーがメニューの外をクリックすると閉じます。だから私はこのようなことをします：

$(myDropDown).mousedown(dropDownMouseDown);
$("html").mousedown(htmlMouseDown,myDropDown);
function dropDownMouseDown(event) {
    event.target.open();
    event.stopPropagation();//I need this line or else htmlMouseDown will be called immediately causing the dropDown-menu to close right before its opened
}
function htmlMouseDown() {
    this.close();
}

まあ、これはうまくいきます。しかし、これを 2 つ追加するとどうなるでしょうか。最初をクリックして開くと、2 つ目も同じように開きます。これは、dropDownMouseDown が伝播を停止し、htmlMouseDown が最初に呼び出されないようにするためです。どうすればこれを回避できますか? これらの 2 つしかない場合、そのためのロジックを追加するのはもちろん簡単ですが、数量が動的である場合はどうなりますか? また、event.stopPropagation() を呼び出したくない場合もあります。これは、そのイベントをリッスンする、使用している他のライブラリに対して奇妙なことを行うためです。$("html").mousedown(htmlMouseDown,myDropDown) という行を dropDownMouseDown-handler 内に入れてみましたが、バブルが html 要素に到達するとすぐに呼び出されます。

4

3 に答える 3

2

ドロップダウン用のセレクターがあると仮定すると (「 」としましょう)、「」.dropdownを使用しようとします。.not()

$('.dropdown').mousedown(dropDownMouseDown);

$("html").on('mousedown', htmlMouseDown);

function dropDownMouseDown(event) {
    event.target.open();
}

function htmlMouseDown(event) {
  $('.dropdown').not($(event.target)).close();
}

これは、css クラスと同じアイデアのフィドルです: http://jsfiddle.net/eFEL6/4/

于 2013-05-27T15:13:24.643 に答える
0

答えてくれてありがとう。彼らは本当に感謝しています。私は満足のいく方法を見つけました。方法は次のとおりです。

$(myDropDown).mousedown(dropDownMouseDown);
$("html").mousedown(myDropDown,htmlMouseDown);//Pass in the dropDown as the data argument, which can then be accessed by doing event.data in the handler
function dropDownMouseDown(event) {
    event.target.open();
}
function htmlMouseDown(event) {
    if (event.target!=event.data)//event.target is the element that was clicked, event.data is set to the dropdown that this handler was added for. Unless these two elements are the same then we can...
        event.data.close();///close the dropdown this handler was added for
}

私がそれを考えなかったなんて信じられない。私の場合、開閉する要素には子要素があるため、event.target は、ハンドラーがアタッチされた要素ではなく、子要素の 1 つになる可能性があります。そこで、html-element-handler を次のように変更しました。

    function htmlMouseDown(event) {
       var element=event.target;
        while (element) {
            if (element==event.data)
                return;
            element=element.parentElement;
        }
        event.data.hide();
    }
于 2013-05-27T15:40:06.890 に答える