jQuery[补1] - 事件冒泡和阻止冒泡

最新推荐文章于 2024-08-14 20:37:21 发布

weixin_34075551

最新推荐文章于 2024-08-14 20:37:21 发布

阅读量56

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bky-1083/p/6353975.html

版权

假设网页上有两个元素，其中一个元素嵌套在另一个元素中，并且都被绑定了 click 事件，同时 body 元素上也绑定了 click 事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="content">
    外层 div 元素
    <span>内层 span 元素</span>
    外层 div 元素
</div>
<div id="msg"></div>
<script src="../../vender/jquery-1.11.3/jquery-1.11.3.js"></script>
<script type="text/javascript">
    $(function () {
        $('span').click(function (e) {
            var txt = $('#msg').html()+"<p>内层 span 元素被单击</p>";
            $('#msg').html(txt);
        });
        $('div').click(function () {
            var txt = $('#msg').html()+"<p>外层 div 元素被单击</p>";
            $('#msg').html(txt);
        });
        $('body').click(function () {
            var txt = $('#msg').html()+"<p>body 元素被单击</p>";
            $('#msg').html(txt);
        })
    })
</script>
</body>
</html>

当单击内部 span 元素，会输出三条记录：

该现象就是由事件冒泡引起的。

元素的 click 事件会按照以下顺序冒泡：

span
div
body

其顺序与事件捕获相反。

停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行，在 jQuery 中提供stopPropagation()方法来停止冒泡。

$('span').click(function (e) {
            var txt = $('#msg').html()+"<p>内层 span 元素被单击</p>";
            $('#msg').html(txt);
            e.stopPropagation();
        });

转载于:https://www.cnblogs.com/bky-1083/p/6353975.html

weixin_34075551

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery[补1] - 事件冒泡和阻止冒泡

假设网页上有两个元素，其中一个元素嵌套在另一个元素中，并且都被绑定了 click 事件，同时 body 元素上也绑定了 click 事件。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title>...
复制链接

扫一扫