stopPropagation 不适用于链接内的嵌套元素答案

【问题标题】：stopPropagation doesn't work on nested element inside linkstopPropagation 不适用于链接内的嵌套元素
【发布时间】：2016-06-14 13:30:49
【问题描述】：

请尝试以下示例。第一个锚点有一个定义为 href 的 URL。当我单击嵌套跨度（“heart”）时，浏览器会跟随链接，而我使用的是 stopPropagation() 方法。

当href 值设置为“#”时，如第二个示例所示，传播将正确停止。我在 Firefox 47 上进行测试，但我认为在 Chrome 中是一样的。

任何人都可以解释这种行为以及如何解决它（我只需要使用 1 个<a> 和一个嵌套元素（跨度）在里面）？

PS：如果<h3>变成<a>标签，请不要备注：这不是问题，HTML5允许我写这个。

PS 2：当我将此代码插入 jsFiddle 时，我没有遇到同样的问题。

我的 HTML5 代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<script
              src="http://code.jquery.com/jquery-2.2.4.min.js"
              integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
              crossorigin="anonymous"></script>

<script>
$(function() {
    $("a").on("click", function(e) {
        alert("Link");
        });

    $("a span").on("click", function(e) {
        e.preventDefault;
        e.stopPropagation();
        e.stopImmediatePropagation();

        // Updated code : If I add this Ajax Request. the "return false" instruction doesn't work anymore
         $.getJSON('http://www.w3schools.com/website/Customers_MYSQL.php', {
              option1: ''
            }, function(response) {
            alert('Heart after getSon');
        }); 

        // Doesn't fix the problem if getJson before
        return false;
        }
        );

});
</script>

<style type="text/css">
    span {display:inline-block;width:30%;margin:0 auto;color:#fff;text-decoration:none;background-color:#000;}
</style>

</head>
<body>


<a href="http://www.ewample.com" style="display:inline-block;width:300px;height:300px;border:1px solid #999;text-align:center;">

    <h3>Link with href</h3>
    <br/>
    <br/>
    <br/>
    <span>Heart</span>
    <br/>
    <br/>
    <br/>
</a>


<a href="#" style="display:inline-block;width:300px;height:300px;border:1px solid #999;text-align:center;">

    <h3>Link without href (only #)</h3>
    <br/>
    <br/>
    <br/>
    <span>Heart</span>
    <br/>
    <br/>
    <br/>
</a>

</body>
</html>

【问题讨论】：

标签： javascript events nested stoppropagation

【解决方案1】：

如果我正确理解了您的预期行为，请尝试在 span 的 click 函数末尾添加 return false;。

$(function() {
    $("a span").click(function(e) {
        e.preventDefault;
        e.stopPropagation();
        alert("Heart");
        return false;
    });
    $("a").click(function(e) {
        alert("Link");
    });
});

编辑：我相信我知道问题所在。根据 jQuery 文档： http://api.jquery.com/jquery.getjson/

由于浏览器安全限制，大多数“Ajax”请求都受同源策略的约束；请求无法从不同的域、子域、端口或协议成功检索数据。

这里的问题是您试图从不同的域中检索数据。您的浏览器拒绝从该域检索数据，因此您的 getJSON() 函数中的代码未运行。尝试使用您自己域中的一些 JSON，看看是否能解决问题。

【讨论】：

老实说，在我的生产代码中我已经使用了这个“return false”，我在我的例子中忘记了它。我试过了，效果很好……但是……在我真正的用例之前，我需要执行一个 Ajax 请求。我已经更新了我的 html 标记，以向您展示此请求使“retun false”无用。
好的，传递给Json请求的参数有错误。在这个例子中它工作正常。所以我不明白为什么它不能在我的生产站点上运行。
可能有其他东西阻止它正常工作。你有任何其他代码作用于 a 或 span 吗？
当我使用Firefox调试器时，我可以看到代码解析直到正确返回false。在那之后......嗯，实际上，它在我的生产环境中运行，但不在我的桌面上......这简直令人难以置信
我认为问题与浏览器安全有关，ajax 通常不允许从不同域请求数据，所以我认为问题是由于您从 w3schools 而不是本地获取 JSON 引起的。我编辑了我的答案以反映这一点。

【解决方案2】：

（代表 OP 发布）。

我只是在我的桌面和我的 preprod 环境中发布问题。在我的生产网站上，传播已正确停止。我不明白为什么，但我不能花更多时间在这上面。

【讨论】：