欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jquery之冒泡事件介绍以及阻止冒泡

程序员文章站 2022-06-11 08:35:17
什么是事件冒泡

wub ......

什么是事件冒泡

<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" onclick="box()">
    <p onclick="test()" style="background: blue">
        wubin.pro <br>
        <span style="background: green" onclick="inner()">子钦博客</span>
    </p>
</div>
<script>
    function inner() {
        alert('inner');
    }
    function test() {
        alert('test')
    }
    function box() {
        alert('box')
    }
</script>

布局结构如下图

jquery之冒泡事件介绍以及阻止冒泡

 

一共单层元素

从外到里依次：div、p、span

每个元素都有单机事件

当单击div触发弹出box

当单击p标签时依次弹出：test、box

当单击span标签依次弹出：inner、test、box

这个即为事件冒泡

从最里层冒泡到最外层

 

如何阻止

很多时候我们不希望事件冒泡

也就是我点击p的时候只弹出test

点击span时候只弹出inner

1.event.stoppropagation()

<body>
    <div style="width: 200px;height: 200px;background: red;margin: 200px auto;" onclick="box()">
        <p onclick="test()" style="background: blue">
            wubin.pro <br>
            <span style="background: green" onclick="inner(event)">武斌博客</span>
        </p>
    </div>
    <script>
        function inner() {
            alert('inner');
            event.stoppropagation();
        }
        function test() {
            alert('test')
        }
        function box(event) {
            alert('box')
        }
    </script>
</body>

这个时候再点击子钦博客时

只是弹出inner    
2.return false

　　

<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" >
    <p  style="background: blue">
        wubin.pro <br>
        <span style="background: green" >武斌博客</span>
    </p>
</div>
<script>
    $(function () {
        $('span').click(function(){
            alert('inner');
            return false;
        })
        $('p').click(function(){
            alert('test');
        })
        $('div').click(function(){
            alert('box');
        })
    })
</script>

效果跟第一种相同

都可以阻止事件冒泡

 

return false与event.stoppropagation()区别

我们将以上代码修改为:

　

<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" >
    <p  style="background: blue">
        wubin.pro <br>
        <a href="https://wubin.pro" style="background: green" >子钦博客</a>
    </p>
</div>
<script>
    $(function () {
        $('a').click(function(event){
            alert('inner');
            // return false;
            event.stoppropagation();
        })
        $('p').click(function(){
            alert('test');
        })
        $('div').click(function(){
            alert('box');
        })
    })
</script>　

可以看出

当使用return false时

a标签的默认行（跳转页面）为也会被阻止

当使用event.stoppropagation()时

先弹出inner

然后页面跳转

 

总结

　

<div style="width: 200px;height: 200px;background: red;margin: 200px auto;" >
    <p  style="background: blue">
        wubin.pro <br>
        <a href="https://wubin.pro" style="background: green" >子钦博客</a>
    </p>
</div>
<script>
    $(function () {
        $('a').click(function(event){
            alert('inner');
            // return false;
            // event.stoppropagation();
            event.preventdefault();
        })
        $('p').click(function(){
            alert('test');
        })
        $('div').click(function(){
            alert('box');
        })
    })
</script>

return false：阻止事件冒泡和默认行为

event.stoppropagation()：单独阻止事件冒泡

event.preventdefault()：单独阻止默认行为

　　

 

上一篇： 虚拟机中linux安装jdk

下一篇： 煮毛豆需要多长时间最好

推荐阅读