原生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如何阻止事件冒泡