Use stopPropagation in click event

Question

I have an anchor inside a div with class "element".

<div class="element logout">
    <div class="subTop">
        <a href="home.jsp" onclick="return confirm('Do you want to logout?');">Log Out</a>
    </div>
</div>

I use the following code to handle logout.

jQuery(".element").click(function(e){
    var tmpHref=jQuery(this).not('.logout').find(".subTop>a").attr('href');
    if(tmpHref!=undefined&&tmpHref!=""&&tmpHref!=null)
    {
        window.location.href=tmpHref;
    }
    else
    {
        jQuery(this).find(".subTop>a").click();
    }
});

But my problem is the confirmation event triggers again and again. I think its because of the even propagation. After my research i find out I can use e.stopPropagation() from this post. But I cannot figure out how could this be used here.

EDIT The message 'Do you want to logout?' in confirm box is dynamically taken from the database, so I cant hard code it in the code.

Dispersion

I think that you want to redirect your page according to div class, logout or not. If logout class then logout.jsp and if div has not logout class then home.jsp. Right? – Pants

You have an infinite loop - click() inside the else clause. Revise your logic first - e.stopPropagation() or cancelling the event bubble is more of a bad patch - your code should be clean enough on its own to exit gracefully without some sort of hackery. I'm sure this code can be re-written very cleanly - can you elaborate what you are trying to accomplish? – Phanotron

Answer 1

This is based on a few assumption of what I think you want. From the comments and the question I understand that the user should be sent to 'home.jsp' if the outer div doe snot have the logout class or to 'logout.jsp' if it does. If that's correct you can cahnge the html to

<div class="element logout">
  <div class="subTop">
    <a href="home.jsp" data-confirmmsg="Do you want to logout?" >Log Out</a>
  </div>
</div>

and the JavaScript to

jQuery(".subTop>a").click(function(e){
  e.preventDefault();
});
jQuery(".element").click(function(e){
    var self = jQuery(this),
        isLogout = self.hasClass('logout')
        anchor = self.find(".subTop>a")
        href = isLogout ? "logout.jsp" : anchor.attr('href');

    if(!isLogout || (isLogout && confirm(anchor.data('confirmmsg'))))
    {
        window.location.href=href;
    }
});

The first part of the Javascript simply disables the a-tag as a link. Nothing happens aside from propagating the event to the outer elements (in case the click was actually on the link we'd still wnt to let the `div-tag handle it). The second part of the JavaScript starts by checking whether the logout class is present or not and sets the href accordingly. finally if the user is being sent to 'logout.jsp' the confirm box will be shown and the return value tested.

Wingover

Hello sir, I respect your opinion, But, I have dyanmic content(from database) in the confirm box. so I cant hard code 'Do you want to logout?'(I have added it as an edit in the post) – Dispersion

@Dispersion you won't have to. Just emit the message as data to the a tag. See update – Wingover

Answer 2

Try this:

HTML:

<div class="element logout">
    <div class="subTop">
        <a href="home.jsp" class="testa" >Log Out</a>
    </div>
</div>

jQuery:

jQuery(".element").click(function(e){
    e.preventDefault();
    if( confirm('Do you want to logout?'))
    {
        //console.log(jQuery(this).parents('.element'));return;
        if(jQuery(this).hasClass('logout'))
        {        
            window.location.href='logout.jsp';
        }
        else
        {
            window.location.href='home.jsp';
        }
    }
});

Test Fiddle: http://jsfiddle.net/e52QN/1/

Pants

@Dispersion Try the above now. – Pants

your code is good +1 for that, but it wont solve my problem. I have dyanmic content(from database) in the confirm box. so i cant hard code 'Do you want to logout?' – Dispersion

You can add data attribute for that like <div class="element logout" data="your database data"> and in jquery use it like if( confirm($(this).attr('data')) – Pants

Answer 3

Try

onclick="return confirm('Do you want to logout?');window.event.cancelBubble = true;"

OR

onclick="javascript:event.stopPropagation();return confirm('Do you want to logout?');"

Echinoderm

Answer 4

You can use:

$('.subTop a').on('click', function (e) {
  e.stopPropagation();
});

I agree with @ink.robot though, your code should be structured better in order to avoid this situation.

Saideman