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.

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.

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/

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?');"

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.