jQuery 阻止事件冒泡和阻止标签默认行为（如超链接） -

浅梦U

浏览: 1509 次
性别:
来自: 武汉

最近访客更多访客>>

woodding2008

失落丶神话

InJavaWeTrust

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery 阻止事件冒泡和阻止标签默认行为（如超链接）

博客分类：

JavaScript 和 jQuery

最近在写JavaScript时，遇到一个问题，就是页面不该跳转的时候它跳转

，该跳转的时候它不动

，百度了很多方法，最终解决了问题

，现整理如下

：

1.阻止事件冒泡
事件冒泡一般指向上冒泡，常见于点击（click）事件，我理解就是：我点里面的某一部分，你外面给我好好待着。代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试冒泡事件</title>
    <script type="text/javascript" src="jqueryjs/jquery-1.11.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("span").click(function () {
                $("#msg").html($("#msg").html()+"<P>内层span元素被单击</P>");
            });
            $("#content").click(function () {
                $("#msg").html($("#msg").html()+"<P>外层div元素被单击</P>");
            });
            $("body").click(function () {
                $("#msg").html($("#msg").html()+"<P>body元素被单击</P>");
            });
        });
    </script>
</head>
<body>
    
    <div id="content" style="width: 200px;border: 1px solid red;">
        外层div元素<br>
        <span style="background: silver;border: 2px dashed yellow;">内层span元素</span><br>
        外层div元素
    </div>
    
    <br>
    <div id="msg"></div>
</body>
</html>

此时，未编写JavaScript代码来阻止事件冒泡，所以在点击内层span标签之后，三个点击事件（内层span，外层div，body）都会被执行（不会贴图片，麻烦你自己执行看效果咯

）

现在，我们来添加event.stopPropagation(); 来阻止事件冒泡，代码修改如下（仅修改JavaScript的span部分）：
$("span").click(function (event) {
      $("#msg").html($("#msg").html()+"<P>内层span元素被单击</P>");
      event.stopPropagation();        //阻止 span 的 click 事件冒泡，不让他冒泡到上层div和body
   });
此时，点击内层sapn元素，外层div和body的点击事件将不会再触发，结果请自行验证。

2.阻止标签默认行为
标签默认行为正好相反，它一般指向下继承。常见于超链接a。我的理解是：当超链接a下面有很多span元素时，我希望的效果是点击某个元素，超链接a不跳转；点击其他元素，超链接跳转，可用于做点赞功能。实例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试冒泡事件</title>
    <script type="text/javascript" src="jqueryjs/jquery-1.11.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("span").click(function (event) {
                $("#msg").html($("#msg").html()+"<P>内层span元素被单击</P>");
                event.stopPropagation();        //阻止 span 的 click 事件冒泡，不让他冒泡到上层div和body
            });
            $("#content").click(function () {
                $("#msg").html($("#msg").html()+"<P>外层div元素被单击</P>");
            });
            $("body").click(function () {
                $("#msg").html($("#msg").html()+"<P>body元素被单击</P>");
            });
        });
    </script>
</head>
<body>
    <a id="" style="border: 1px solid red;display: inline-block;" href="http://baidu.com">
        <div id="content" style="width: 200px;border: 1px solid red;">
            外层div元素<br>
            <span style="background: silver;border: 2px dashed yellow;">内层span元素</span><br>
            外层div元素
        </div>
    </a>
    <br>
    <div id="msg"></div>
</body>
</html>

此时，未添加阻止默认行为的JavaScript代码，无论你点击何处超链接都会跳转，而我希望的效果是，点击span超链接不跳转。
现在，我们添加 event.preventDefault();来阻止默认行为，添加一个超链接a点击事件，JavaScript代码如下：
$("#tiao").click(function (event) {
                event.preventDefault();    //阻止默认行为
    });
此时，点击内层sapn元素，超链接a将不会再跳转，结果请自行验证。

3.阻止冒泡事件和默认行为
这是我最终希望的结果：点击span 超链接a不跳转，点击其他部分超链接跳转。html代码和2的代码相同，修改JavaScript代码如下：
$("span").click(function (event) {
        $("#msg").html($("#msg").html()+"<P>内层span元素被单击</P>");
        return false;     //阻止事件冒泡和默认行为
     });
此时，点击span 超链接a不跳转，点击其他部分超链接跳转。结果请自行验证。

写的不好，如有不足之处，还请指教。
谢谢阅读！

分享到：