zoukankan html css js c++ java

js的冒泡和阻止默认行为

stopPropagation 停止冒泡

preventDefault 阻止默认行为

return false 停止冒泡和阻止默认行为。

冒泡的执行顺序是由触发事件的元素往父级元素层层执行。

但是如果当前元素没有阻止默认行为，而父级元素阻止默认行为，那么默认行为也不会触发。

示例代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div id="parent" style=" 200px;height: 200px;border: 1px solid red;padding: 10px">
    <span>parent</span>
    <div id="middle" style="border: 1px solid blue;padding: 10px; 160px;height: 100px">
        <span>middle</span>
        <br/>
        <a href="111.html" id="self" style="margin-left: 50px;margin-top: 20px">self</a>
    </div>
</div>
<label id="info">

</label>
</body>
</html>

浏览器运行后：

定义事件

1、不阻止默认行为，不阻止冒泡

<script>
    $(document).ready(function(){
        $("#parent").click(function(e){
            console.log("parent is clicked!");
        });
        $("#middle").click(function(e){
            console.log("middle is clicked!");
        });
        $("#self").click(function(e){
            console.log("self is clicked!");
        });
    });
</script>

执行结果：

self is clicked!

middle is clicked!

parent is clicked!

打印完信息后，跳转到111.html

2、当前元素不阻止默认行为，但是父级元素阻止默认行为

<script>
    $(document).ready(function(){
        $("#parent").click(function(e){
            e.preventDefault();
            console.log("parent is clicked!");
        });
        $("#middle").click(function(e){
            console.log("middle is clicked!");
        });
        $("#self").click(function(e){
            console.log("self is clicked!");
        });
    });
</script>

执行结果：

self is clicked!

middle is clicked!

parent is clicked!

打印完信息后，不跳转（默认行为没有执行）

3、当前元素不阻止默认行为，但是阻止冒泡。父级元素仍然阻止默认行为

<script>
    $(document).ready(function(){
        $("#parent").click(function(e){
            e.preventDefault();
            console.log("parent is clicked!");
        });
        $("#middle").click(function(e){
            console.log("middle is clicked!");
        });
        $("#self").click(function(e){
            e.stopPropagation();
            console.log("self is clicked!");
        });
    });

</script>

执行结果：

self is clicked!

打印完信息后，页面跳转到111.html。（说明阻止冒泡之后，父元素的阻止默认行为与当前元素没有关系了。）

查看全文

相关阅读:
[js开源组件开发]ajax分页组件
 使用nodejs+express+socketio+mysql搭建聊天室
 [js开源组件开发]图片放大镜
 JY游戏之毁经典《扫雷》
JY游戏之手游《打卡乐猫》
[js开源组件开发]图片懒加载lazyload
[js开源组件开发]js文本框计数组件
 [js开源组件开发]js轮播图片支持手机滑动切换
 [js开源组件开发]js手机联动选择日期开源git
[js开源组件开发]-手机端照片预览组件

原文地址：https://www.cnblogs.com/zhanglm125/p/4193245.html