JQ-事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <style type="text/css">
        .grandfather{
            width: 300px;
            height: 300px;
            background-color: green;
            position: relative;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 400px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('body').click(function() {
                alert(4);
            });
            $('.grandfather').click(function() {
                alert(3);
            });
            $('.father').click(function() {
                alert(2);
            });
            $('.son').click(function(event) {//event代表當(dāng)前事件
                alert(1);
                // console.log(event);//顯示很多屬性，其中clientX、clientY就是點擊的坐標
                // alert("X軸坐標：" + event.clientX);

                // //阻止事件冒泡
                // event.stopPropagation();

                //合并阻止操作：把阻止冒泡和阻止默認行為合并
                return false;
            });

            //阻止右鍵菜單
            $(document).contextmenu(function(event){
                // //阻止默認行為（原來右鍵能彈出菜單，阻止后無法彈出）
                // event.preventDefault();

                //合并阻止
                return false;
            })
        })
    </script>
</head>
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容