在点击事件中使用stopPropagation

我在具有class“element”类的div中有一个锚点。在点击事件中使用stopPropagation

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

但我的问题是确认事件触发一次又一次。我认为这是因为它的传播。经过我的研究，我发现我可以使用this后的e.stopPropagation()。但我无法弄清楚如何在这里使用它。

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

来源

2013-03-18 arjuncc

我认为你想根据'div class'，'logout'或'not'来重定向你的页面。如果'logout class'则是'logout.jsp'，如果div没有'logout class'，那么'home.jsp'。对？ – 2013-03-18 08:13:19

你有一个无限循环 - 在else子句中单击（）。首先修改你的逻辑--e.stopPropagation（）或取消事件泡泡更糟糕的补丁 - 你的代码应该足够干净，可以在没有某种恶意行为的情况下正常退出。我确信这段代码可以重新编写得很干净 - 你能详细说明你正在努力完成什么吗？ – 2013-03-18 08:16:04

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

来源

2013-03-18 09:02:28

您好先生，我尊重您的意见，但是，我在确认框中有dyanmic内容（来自数据库）所以我不能硬编码'你想要登出？'（我已经将它添加为帖子中的编辑） – arjuncc 2013-03-18 09:05:43

@arjuncc你不需要，只需将消息作为数据发送到a标签即可。请参阅更新 – 2013-03-18 09:08:09

感谢它完美的工作。 – arjuncc 2013-03-18 09:16:20

尝试

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

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

来源

2013-03-18 08:09:57

其工作，但没有重定向到下一页 – arjuncc 2013-03-18 08:40:14

您可以使用：

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

我虽与@ ink.robot同意，你的代码应该按顺序结构更合理以避免这种情况。

来源

2013-03-18 08:19:53

试试这个：

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/

来源

2013-03-18 08:23:49

对不起，我希望它在div的点击事件工作 – arjuncc 2013-03-18 08:39:06

@arjuncc现在尝试以上。 – 2013-03-18 08:47:37

你的代码很好，但它不会解决我的问题。我在确认框中输入了dyanmic内容（来自数据库）。所以我不能硬编码'你想注销吗？' – arjuncc 2013-03-18 08:56:50

在点击事件中使用stopPropagation

回答

相关问题