在点击事件中使用stopPropagation

我有一个类与“元素”的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() 。 但我无法弄清楚在这里如何使用它。

编辑消息'你想注销吗？' 在确认框是从数据库中动态获取的，所以我不能在代码中对其进行硬编码。

---

这是基于我认为你想要的一些假设。 从评论和问题我明白，如果外部div doo snot具有注销类或'logout.jsp'，如果用户应该发送到'home.jsp'，则应将用户发送到'home.jsp'。 如果这是正确的，你可以cahnge的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 tag作为链接。 除了将事件传播到外部元素之外没有任何事情发生（如果点击事实上在链接上，我们仍然会让`div标签处理它）。 JavaScript的第二部分首先检查注销类是否存在并相应地设置href。 最后，如果用户被发送到“logout.jsp”，则会显示确认框并测试返回值。

---

尝试这个：

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

测试小提琴：http://jsfiddle.net/e52QN/1/

---

尝试

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

要么

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

链接地址: http://www.djcxy.com/p/12389.html

上一篇: Use stopPropagation in click event

下一篇: Design patterns for aggregating heterogeneous tabular data