0

jQueryのEventオブジェクトにはpreventDefault()、明らかにデフォルトの動作を防ぐこの便利なメソッドがあります。

これは通常、クリックイベントがブラウザのデフォルトの動作を実行しないようにするために使用されます。

カスタムイベントにも役立つようです。

この動作で達成したいタスクは別の関心事ですが、私が探している動作の例として説明します。

divからポップアップを作成する単純なプラグインがあります。インターネットで見つけました。

$(selector).pop();

ポップアップの子以外をクリックすると閉じ、クリックされた要素のデフォルトのクリック動作を防ぐためにハッキングしました。

function closeInactivePop() {
    var foundAny = false;
    jQ.each(function (i) {
        var $this = $(this);

        if ($this.hasClass('active') && ! $this.data('activePop')) {
            $this.removeClass('active');
            foundAny = true;
        }
    });
    return foundAny;
}

$('body').click(function(){ 
    // If we closed any, cancel the propagation. Otherwise let it be.
    if (closeInactivePop()) {
        $(document).trigger('jQuery.pop.menuClosed');
        return false;
    }
});

（今、私はそれを貼り付けたので、これをもう少しうまくやることができたと思いますが、それにもかかわらず）。

ポップアップ内にカラーピッカーを描画する新しいプラグインを追加しました。このカラーピッカーが作成するDOMを除いて、ポップアップ内にはありません。それは視覚的にその中にあるだけです。DOM構造は別です。

前述のハックでは、実際には別のイベントを発生させたいと思います。そのデフォルトの動作はポップアップを閉じることです。

function closeInactivePop() {
    var foundAny = false;
    jQ.each(function (i) {
        var $this = $(this);

        if ($this.hasClass('active') && ! $this.data('activePop')) {
            $(document).trigger('jQuery.pop.menuClosed');
            $this.removeClass('active');
            foundAny = true;
        }
    });
    return foundAny;
}

$('*').click(function(e) {
    var $this = $(this);

    // This bit is pseudocode, where the Function is the default behaviour 
    // for this event.
    // It is helpful that $this is actually the clicked element and not the body.
    $this.trigger('jQuery.pop.menuBeforeClose', function() {
        // if we run default behaviour, try to close the popup, or re-trigger the click.
        if (!closeInactivePop()) {
            $this.trigger(e);
        }
    });
});

その後、私は後で行うことができます

$('#colour-picker').bind('jQuery.pop.menuBeforeClose', function(e) {
    e.preventDefault();
});

これにより、元のクリックイベントのターゲットがカラーピッカーまたはその中の何かである場合に、closeInactivePopupのデフォルトの動作が実行されなくなります。

どういうわけか、ハッキーでもこれを行うことができますか？

4

1 に答える 1

1

それを行うためのネイティブな方法があるとは思えません。ただし、イベント ハンドラから値を返す機能を提供する「trigger()」の代わりに「triggerHandler()」を使用することもできます。別の比較的単純な解決策は、計画されたアクションをキャンセルするために使用できるカスタム「イベント」オブジェクトを渡すことです。

function Action() {
    var status = true;
    this.cancel = function() { status = false; };
    this.status = function() { return status; };
}

$('button').click(function() {
    var action = new Action();
    $(this).trigger('foo', [action]);
    if (action.status()) {
        // ... perform default action
    }
});​

イベント ハンドラーで:

$('*').bind('foo', function(event, action) {
    action.cancel();
});
于 2012-12-17T16:23:59.663 に答える