在点击事件中使用 stopPropagation答案

【问题标题】：Use stopPropagation in click event在点击事件中使用 stopPropagation
【发布时间】：2013-03-18 07:54:27
【问题描述】：

我在一个带有“元素”类的 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();
    }
});

但我的问题是确认事件一次又一次地触发。我认为这是因为均匀传播。经过研究，我发现我可以使用来自this 帖子的e.stopPropagation()。但我不知道如何在这里使用它。

编辑消息“您要注销吗？”确认框是从数据库中动态获取的，所以我不能在代码中硬编码。

【问题讨论】：

我认为您希望根据div class、logout 或not 重定向您的页面。如果logout class 则logout.jsp 并且如果div 没有logout class 则home.jsp。对吗？
你有一个无限循环 - click() 在 else 子句中。首先修改你的逻辑 - e.stopPropagation() 或取消事件气泡更像是一个糟糕的补丁 - 你的代码应该足够干净，可以在没有某种黑客行为的情况下优雅地退出。我确信这段代码可以非常干净地重写 - 你能详细说明你想要完成的事情吗？

标签： jquery events stoppropagation

【解决方案1】：

试试这个：

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/

【讨论】：

@arjuncc 现在试试上面的。
您的代码对此很好 +1，但它不会解决我的问题。我在确认框中有动态内容（来自数据库）。所以我不能硬编码“你想注销吗？”
您可以为 <div class="element logout" data="your database data"> 添加 data attribute 并在 jquery 中像 if( confirm($(this).attr('data')) 一样使用它

【解决方案2】：

这是基于我认为您想要的一些假设。从 cmets 和问题我了解到，如果外部 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-tag 处理它）。 JavaScript 的第二部分首先检查是否存在注销类并相应地设置 href。最后，如果用户被发送到“logout.jsp”，确认框将显示并测试返回值。

【讨论】：

您好先生，我尊重您的意见，但是，我在确认框中有动态内容（来自数据库）。所以我不能硬编码“你想注销吗？”（我已将其添加为帖子中的编辑）
@arjuncc 您不必这样做。只需将消息作为数据发送到 a 标签。查看更新

【解决方案3】：

试试

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

或

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

【讨论】：

【解决方案4】：

你可以使用：

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

我同意@ink.robot，但您的代码应该结构更好，以避免这种情况。

【讨论】：