web-dev-qa-db-fra.com

Comment puis-je arrêter la propagation des événements avec Backbone.js?

En utilisant une vue Backbone.js, disons que je veux inclure les événements suivants:

    events: {
        'click a': 'link', 
        'click': 'openPanel' 
    }

Comment puis-je éviter que openPanel ne se déclenche lorsque je clique sur un lien. Ce que je veux, c'est avoir une boîte cliquable qui déclenchera une action, mais cette boîte peut avoir des éléments qui devraient déclencher d'autres actions, et non l'action parent. Pensez par exemple à Twitter.com et aux liens dans Tweets/panneau de droite.

javascripteventsbackbone.js
36
Gunnar Lium

J'ai utilisé e.stopImmediatePropagation(); afin d'empêcher l'événement de se propager. Je souhaite qu'il y ait un moyen plus court de le faire. Je voudrais retourner faux; mais cela est dû à ma familiarité avec jQuery

49
Tim Banks

La méthode JQuery preventDefault serait également une bonne option.

    window.LocationViewLI = Backbone.View.extend({
        tagName: "li",
        template: _.template('<a href="/locations/<%= id %>"><%= name %></a>'),

        events: {
            "click a": "handleClick"
        },      
        handleClick: function(event) {
            event.preventDefault();
            console.log("LocationViewLI handleClick", this.model.escape("name") );
            // debugger;
        },
        ...
21
jspooner

Chacun de vos gestionnaires d'événements recevra un objet événement lors de son déclenchement. Dans votre gestionnaire, vous devez utiliser la méthode event.stopPropagation () de jQuery. Par exemple:

link: function(event) {  
  //do some stuff here
  event.stopPropagation();
}
6
Gabe Hollombe

Deux autres méthodes qui pourraient vous convenir:

1

events: {
    'click a': 'link', 
    'click *:not(a, a *)': 'openPanel' 
}

Ensuite, openPanel ne capturera pas les événements click sur les <a> Ou les enfants d'un <a> (Au cas où vous auriez une icône dans votre balise <a>).

2

En haut de la méthode openPanel, assurez-vous que la cible de l'événement n'était pas un <a>:

openPanel: function(event) {
    // Don't open the panel if the event target (the element that was
    // clicked) is an <a> or any element within an <a>
    if (event && event.target && $(event.target).is('a, a *')) return;

    // otherwise it's safe to open the panel as usual
}

Notez que ces deux méthodes permettent toujours d'appeler la fonction openPanel depuis un autre emplacement (à partir d'une vue parent ou d'une autre fonction de cette vue, par exemple). Ne passez pas un argument event et ça ira. Vous n'avez également rien à faire de spécial dans votre fonction link - il suffit de gérer l'événement click et de passer à autre chose. Bien que vous souhaitiez probablement encore appeler event.preventDefault().

1
colllin