Question

请尝试以下示例。第一个锚具有定义为href的URL。当我单击嵌套的span（“heart”）时，链接后跟浏览器，而我使用了stopPropagation（）方法。

如第二个示例中那样将href值设置为“＃”时，传播将被正确停止。我正在测试Firefox 47，但我认为它在Chrome中是一样的。

任何人都可以解释这种行为以及如何解决它（我确实只需要使用1 <a>和嵌套元素（span）吗？

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>

Answer 1

（代表OP发布）。

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

Answer 2

如果我正确理解您的预期行为，请尝试在您的范围点击功能结束时添加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，看看是否能解决它。

stopPropagation对链接内的嵌套元素不起作用

我的HTML5代码：

2 个答案: