CODEWITHSUNDEEP
javascriptjquery
yair
yair

Reputation: 689

jQuery stopPropagation is ignored

My goal is to prevent all the click events (hiding/showing of elements in the HTML when clicked) unless a certain condition is met (the user has a certain word in an input element).

So i tried to add that logic to the click handler of the document or "html" but the click handler of the other element fired first because of bubble up.

So i tried attaching that logic to "*", and now that click handler fires first- but propagates it to the the other element too, ignoring stopPropagation, preventDefault and return false. 

$(document).ready(function(){    
  $("*").click(function(event){
    if ($("#user").val() !== "admin"){
      console.log("1");
      event.stopPropagation();
      event.preventDefault();  
      return false;  
    }
  });
  $("#user").click(function(event){
    console.log("2");
    // do something
  });
});
  1. Why "2" is written to the console after "1" when there shouldn't be any further propagation because of return false/stopPropagation?
  2. How else can i achieve my goal using jQuery?

Thanks!

Upvotes: 1

Views: 857

Answers (1)

Matt
Matt

Reputation: 75317

  1. stopPropagation() prevents the event propagating any further up the ancestor tree. However, it doesn't prevent the remaining event handlers on the current from being fired.

    To do this (prevent further propagation and prevent any further event handlers on the current element from being fired), you need to call stopImmediatePropagation() (instead, not as well).

  2. Attaching an event handler to every element in this manner, and calling stopImmediatePropagation() (as well as preventDefault()) will prevent all clicks from having an effect; providing no event handlers are bound before (as handlers are executed in order; you can't undo a handler which has already fired).

    This doesn't make it nice though, as finding, enumerating over, and attaching a handler to every element is pretty costly.

    To make it nicer, your options are either:

    1. Attach a click event to document, and simply preventDefault() and sacrifice stopImmediatePropagation().

    2. Check the state of #user in each event handler; you can ease the pain of this by rolling your own wrapper function;

      function checkUserState(then) {
    return function () {
        if ($("#user").val() !== "admin") {
            then.apply(this, arguments);
        }
    };
};

      ... use like so;

      $("#user").click(checkUserState(function(event){
    console.log("2");
}));

    As noted in the comments, I'm purposefully avoiding the suggestion of using event delegation, as whilst allows attaching only one event handler instead of n, it doesn't allow you to stopPropagation() of events.

Upvotes: 1

Related Questions