Comment puis-je arrêter la propagation d'événement avec Backbone.js?

Question

À l'aide d'une vue Backbone.js, dites que je souhaite inclure les événements suivants:

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

Comment puis-je éviter que openPanel soit déclenché 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 contenir des éléments qui devraient déclencher d'autres actions, et non l'action parent. Pensez par exemple à Twitter.com et aux liens dans le panneau de droite / Tweets.

Answer 1

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

Answer 2

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

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

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

Answer 3

Chacun de vos gestionnaires d’événements se verra transmettre un objet d’événement lorsqu’il sera déclenché. Dans votre gestionnaire, vous devez utiliser la méthode event.stopPropagation () de jQuery. Par exemple:

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

Answer 4

Deux autres méthodes qui pourraient travailler pour vous:

1

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

Puis openPanel de ne pas capturer click événements sur n'importe quel <a> ou l'enfant d'un <a> (dans le cas où vous avez une icône dans votre <a> tag).

2

En haut de l' openPanel méthode, 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 encore l' openPanel fonction qui doit être appelée d'ailleurs (à partir d'une vue parent ou une autre fonction de ce point de vue, par exemple). Il suffit de ne pas passer un event argument et ça va être bien. Vous aussi vous n'avez pas à faire quelque chose de spécial dans votre link fonction -- juste gérer l'événement de clic et de progresser. Bien que vous aurez probablement toujours envie de les appeler event.preventDefault().

Answer 5

Renvoie "false" dans votre fonction "link".