jQuery verhindern, dass alle Ereignis-bubbling

Ich bin mit jQuery ist es widget-factory und verwenden von benutzerdefinierten Ereignissen für die Behandlung von Ereignissen in meiner Anwendung.

Dies bedeutet, dass alle meine Veranstaltung verbindlich sieht viel wie:

//...in the widget factory code

$(this.element).addClass('customEventClass');
$(this.element).bind('mysite.loadNextPage', $.proxy(this, 'loadNextPage');

und die Ereignisse ausgelöst werden durch tun:

$('.customEventClass').trigger('mysite.loadNextPage');

Weil die Veranstaltungen werden direkt an die Elemente, die Notwendigkeit, Sie zu erhalten, brauche ich nicht, Sie haben diese benutzerdefinierte Ereignisse Blase oben durch den DOM. Ich weiß, ich kann überprüfen, ob das auch hat gequasselt, oder nicht dadurch in die event-handler-code:

if (event.target != event.currentTarget) {
    event.stopPropagation();
    event.preventDefault();
    return;
}

Aber in dem moment, da die meisten Elemente, die zu hören sind, die für die benutzerdefinierte Ereignisse müssen nicht ein handler registriert für 'mysite.loadNextPage' gibt es 51 Ereignisse, die generiert werden, wo nur 1 eigentlich gar nichts. Gibt es eine Möglichkeit entweder:

  1. sagen, jQuery, nicht zu Blasen-diese Ereignisse überhaupt nicht oder
  2. Fügen Sie eine Standard-stop-propagation' - handler, um alle DOM-Objekte, die der Klasse 'customEventClass" zu stoppen, Sie sprudelt bis ein Ereignis, dass Sie nicht eine bestimmte handler für.

Oder gibt es andere gute Verfahren für die nur auslösende Ereignisse für Elemente interessant, die in diesen Ereignissen, anstatt viele Ereignisse ausgelöst werden, für Elemente, die nicht daran interessiert sind, diese Ereignisse.

InformationsquelleAutor Danack | 2013-01-30
  1. 2

    Können Sie ebenfalls false zurück von Ihrem event-handler-Funktion zu stoppen, die Ausbreitung, das ist, was ich normalerweise verwenden:

    Rückgabe von false durch einen event-handler wird automatisch aufgerufen Ereignis.stopPropagation() und event.preventDefault(). Ein false-Wert kann auch weitergegeben werden für die hf als Abkürzung für function(){ return false; }. So, $( "a".deaktiviert" ).on( "click", false ); fügt einen Ereignis-handler auf alle links mit der Klasse "disabled", dass verhindert, dass Sie Folgen, wenn Sie angeklickt werden und hält auch den Fall sprudelt.

    Sehen http://api.jquery.com/on/

    InformationsquelleAutor user1118279
  2. 1

    Sieht es aus wie es gibt keinen guten Weg, es zu tun mit jQuery, wie es ist, aber es ist sehr einfach zu schreiben ist eine neue Funktion, um dies zu ermöglichen.

    Zuerst schrieb ich eine neue Funktion zu stoppen, die Veranstaltung sprudelt (und auch das Ereignis anmelden, warum nicht).

    function    eventWrapper(event){

    var logString = 'Event called: ' + event.type + ":" + event.namespace;

    if (jQuery.isFunction(this.log) == true) {
        this.log(logString);
    }
    else if (jQuery.isFunction(Logger.log) == true) {
        Logger.log(logString);
    }
    else{
        console.log(logString);
    }

    event.stopPropagation();
}

    Und nun eine neue Funktion Hinzugefügt werden, ist jQuery.

    //A global GUID counter for objects
guidWrapper: 1,

proxyWrapper: function(wrappedFn, fn, context, wrapFn ) {

    var args, proxy, tmp;

    if ( typeof context === "string" ) {
        tmp = fn[ context ];
        context = fn;
        fn = tmp;
    }

    //Quick check to determine if target is callable, in the spec
    //this throws a TypeError, but we will just return undefined.
    if ( !jQuery.isFunction( fn ) ) {
        return undefined;
    }

    //Simulated bind
    args = core_slice.call( arguments, 3 );
    proxy = function() {
        wrappedFn.apply( context || this, args.concat( core_slice.call( arguments ) ) );
        return fn.apply( context || this, args.concat( core_slice.call( arguments ) ) );
    };

    //Set the guid of unique handler to the same of original handler, so it can be removed
    proxy.guid = fn.guid = fn.guid || jQuery.guid++;

    return proxy;
},

    Dann anstelle der Bindung die Funktion wie folgt:

    $(this.element).bind('click', $.proxy(this.click, this));

    Stattdessen binden Sie es wie folgt.

    $(this.element).bind('click', $.proxyWrapper(eventWrapper, this.click, this));

    Dies bedeutet, dass, wenn das Ereignis ausgelöst wird, das erste element, das wartet auf dieses Ereignis rufen Ereignis.stopPropagation auf der Veranstaltung, und so wird es nicht sprudeln, um andere Elemente, die möglicherweise auch hören von der Veranstaltung.

    InformationsquelleAutor Danack
Schreibe einen Kommentar