Home/ Questions/Q 8174777
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T22:33:00+00:00

I have built a site which requires user to login. Now I have decided

  • 0

I have built a site which requires user to login. Now I have decided to make content available without logging in but some operation require user to login first. The site heavily depends on Javascript. If user click some button, login form should be popped-up.

What I am planning to do is to attach click event with required buttons so as to check if user is logged in.
Previous code:

 $('body').on('click','.editRating',function(){
      // code to edit        
      return false;
   })

This is i am planning. To attach one more event handler to required button to check login.

 $('body').on('click','.editRating',function(){
      if user is not loggedIn{
           popup loginForm
           return false
       }        
 })
  $('body').on('click','.editRating',function(){
      // code to edit        
      return false;
   })

So
does this guarantee execution of event-handlers in the same order as defined?
Is there a more cleaner and safe way of achieving the goal?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could just put it all in one event handler:

    $('body').on('click','.editRating',function(){
    if user is not loggedIn{
        popup loginForm
        return false
    }        

    // code to edit        
    return false;
})

    If that won’t work, then you could take advantage of capture phase vs. bubble phase in event handling to insure that you get the order you want. I believe jQuery only does bubble phase (although I welcome correction if I’m wrong about that, of course). So you will have to ditch the jQuery on() stuff in favor of generic JavaScript addEventHandler() stuff.

    (Note that addEventListener() isn’t in IE 8 or earlier, so if you need to support those browsers then you will need to check for addEventListener() and, if it does not exist, use attachEvent() instead. See the relevant MDN documentation.)

    http://jsfiddle.net/WdtsL/ shows how you might do this (minus the IE 8 support just mentioned). Ancestor element capture phase handlers all fire before the child element bubble phase handlers. So you can put your click event handler that checks for login on the body tag or any outer container in capture phase. Then the individual buttons can handle clicks normally in bubble phase.

    Example HTML:

    <body id="myBody">
<div id="myDiv">
    Click me!
</div>
</body>​

    Corresponding example JavaScript:

    var myBody = document.getElementById('myBody');
var myDiv = document.getElementById('myDiv');

myDiv.addEventListener('click', function() { alert("Bubbling phase!"); }, false);
myBody.addEventListener('click', function() { alert("Capture phase!"); }, true);
myBody.addEventListener('click', function() { alert("Also a capture phase!"); }, true);
myDiv.addEventListener('click', function() { alert("Oh, hey, I'm bubbling phase!"); }, false);​
    • 0