在单击事件中使用stopPropagation

Question

我在div中有一个带有"元素"类的锚.

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

我使用以下代码来处理注销.

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();
    }
});

但我的问题是确认事件一次又一次地触发.我认为这是因为传播均匀.经过我的研究,我发现我可以e.stopPropagation()在这篇文章中使用.但我无法弄清楚如何在这里使用它.

编辑 消息'您要退出吗？' 在确认框中是从数据库中动态获取的,所以我无法在代码中对其进行硬编码.

Answer 1

这是基于我认为你想要的一些假设。从评论和问题中我了解到，如果外部 div 没有注销类，则应将用户发送到“home.jsp”，如果有，则应将用户发送到“logout.jsp”。如果这是正确的，你可以将 html 更改为

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

和 JavaScript

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;
    }
});

Javascript 的第一部分只是禁用 -a标记作为链接。除了将事件传播到外部元素之外，什么也没有发生（如果点击实际上是在链接上，我们仍然不想让“div 标签处理它”）。JavaScript 的第二部分首先检查注销类是否存在，并相应地设置 href。最后，如果用户被发送到“logout.jsp”，则会显示确认框并测试返回值。