原生js和事件冒泡和默认事件

本文转载自查看原文 2019-07-11 11:29 839 原生js

事件冒泡：html元素是嵌套结构，在触发内层元素的事件时，外部事件也会被由内到外触发，这种现象叫做事件冒泡
阻止冒泡事件： e.stopPropagation();
默认事件： a标签的跳转事件就是默认事件
阻止默认事件： e.preventDefault();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        <style>
        .div1{
            width:400px;
            height:400px;
            border:1px solid black;
        }
        .div2{
            width:300px;
            height:300px;
            border:1px solid black;
        }
        .div3{
            width:200px;
            height:200px;
            border:1px solid black;
        }
        .div4{
            width:100px;
            height:100px;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <!-- 事件冒泡：实现点击哪个div，控制台打印哪个div的class类名 -->
    <div class="div1" onclick="xianshi('div1',event)">
        <div class="div2" onclick="xianshi('div2',event)">
            <div class="div3" onclick="xianshi('div3',event)">
                <div class="div4" onclick="xianshi('div4',event)"></div>
            </div>
        </div>
    </div>

    <!-- 默认事件:实现触发后面的xianshi方法，但页面不进行跳转 -->
    <a href="https://www.baidu.com" onclick=xianshi("a标签",event)>a标签的默认事件</a>

    <script type="text/javascript">   
        function xianshi(name,e){
            console.log(name);
            e.stopPropagation();
            e.preventDefault();
        }
    </script>
</body>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 js事件冒泡、阻止事件冒泡以及阻止默认行为 js 停止事件冒泡和阻止浏览器默认事件事件冒泡与默认行为 vue.js 自带阻止默认事件阻止冒泡关于jQuery与JS的阻止冒泡与阻止默认事件处理阻止冒泡，和取消默认事件 jQuery 阻止冒泡和默认事件 Js 冒泡事件阻止 JS事件冒泡与捕获 JS如何阻止事件冒泡