阻止冒泡——小练习

来源：互联网发布：学习编程语言的网站编辑：程序博客网时间：2024/06/12 23:00

html部分

<div class="yi">        <div class="er">            <p>1</p>            <ul>                <li>2</li>                <li>3</li>                <li>4</li>                <li>5</li>                <li>6</li>            </ul>        </div></div>

css部分

<style>     *{list-style: none; margin: 0; padding: 0;}     .yi{margin: 50px 0 0 300px;}     .er{width: 200px; height: 40px; border: 1px solid #333; color: #333; font-size: 20px; text-align: center; line-height: 40px; cursor: pointer;}     .er ul{display: none; border: 1px solid blue;border-top:none;}     .er ul li{width: 200px; text-align: center; height:30px; line-height: 30px;}     .er ul li:hover{background: blue; color: #fff;}    </style>

js部分

<script>    $(".er p").click(function(event){        event.stopPropagation();           //阻止冒泡        $(this).siblings("ul").toggle();    })    $(".er ul li").click(function(){        var tex = $(this).text();        $(".er p").text(tex);        $(".er ul").hide();    })    $("html").click(function(){        $(".er ul").hide();    })</script>

效果图

这里写图片描述

js阻止冒泡

<script>window.onload = function() {    /*    阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;    */    var oBtn = document.getElementById('btn');    var oDiv = document.getElementById('div1');    oBtn.onclick = function(ev) {        var ev = ev || event;        ev.cancelBubble = true;//阻止当前对象的当前事件的冒泡        oDiv.style.display = 'block';    }    document.onclick = function() {        /*setTimeout(function() {            oDiv.style.display = 'none';        }, 1000);*/        oDiv.style.display = 'none';    }} </script><body>    <input type="button" value="按钮" id="btn" />    <div id="div1"></div></body>

效果图

这里写图片描述

阅读全文

0 0