阻止事件冒泡以及stopPropagation(),preventDefault()和return false;的区别

e.preventDefault()是阻止默认事件的方法;

e.stopPropagation()是阻止事件冒泡;

return false;是既阻止事件冒泡又阻止默认事件;

以下是个阻止事件冒泡的小案例:

<!DOCTYPE html>
<html>
<head>
    <title>阻止冒泡</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<style type="text/css">
    #div1{
        width: 400px;
        height: 400px;
        background: #f00;
    }
    #div2{
        width: 300px;
        height: 300px;
        background: #0f0;
    }
    #div3{
        width: 200px;
        height: 200px;
        background: #00f;
    }
    #div4{
        width: 100px;
        height: 100px;
        background: #f0f;
    }
</style>
<body>
    <div id="div1">我是div1
        <div id="div2">我是div2
            <div id="div3">我是div3
                <div id="div4">我是div4</div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function(){
            $("body").on(‘click‘, ‘#div1‘, function() {
                alert(‘我是div1‘)
            }).on(‘click‘, ‘#div2‘, function() {
                alert(‘我是div2‘)
                e.stopPropagation();
            }).on(‘click‘, ‘#div3‘, function() {
                alert(‘我是div3‘)
                e.stopPropagation();
            }).on(‘click‘, ‘#div4‘, function() {
                alert(‘我是div4‘)
                return false;
            });
        })

    </script>

</body>
</html>

效果图如下:

原文地址:https://www.cnblogs.com/myunYao/p/8874735.html

时间: 2024-10-10 21:53:06

阻止事件冒泡以及stopPropagation(),preventDefault()和return false;的区别的相关文章

stopPropagation, preventDefault 和 return false 的区别

因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagation(), preventDefault() 和 return false. 它们之间有什么区别, 该何时使用呢? 将在本文中进行讲解. 术语 监听事件, 在在节点上能被监听的页面操作. 如: select 节点的 change 事件, a 节点的 click 事件.浏览器默认动作, 指特定页面元素

事件冒泡 ,阻止事件冒泡 e.stopPropagation()

<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>冒泡</title> <script src="script/jquery-1.11.0.min.js" type="text/javascript"></script> <script type="text/javascri

stopPropagation(), preventDefault() 和 return false

因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagation(), preventDefault() 和 return false. 它们之间有什么区别, 该何时使用呢? 将在本文中进行讲解. 术语 监听事件, 在在节点上能被监听的页面操作. 如: select 节点的 change 事件, a 节点的 click 事件.浏览器默认动作, 指特定页面元素

阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, 2.event.preventDefault()方法 这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素: 3.return false  : 这个方法比较暴力,他会同事阻止事件冒泡也会阻止默认事件:写上此代

JS 之 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时候,如果点击一个连接,这个连接仍然会被打开. 二.event.preventDefault() 阻止默认事件的方法,调用此方法时,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素: 三.return false: 这个方法比较暴力,会同时阻止事件冒泡也会阻止默认事件:写上此代码,连接不会被

阻止事件冒泡(stopPropagation和cancelBubble)

<div id="divId1" style="width:500px;height:500px;background-color:#3ac;text-align:center;" align="center"> <div id="divId2" style="width:400px;height:400px;background-color:#f1f; margin:0 auto;"&g

js阻止事件冒泡 return false / e.stopPropagation() /e.preventDefault()

由于每个元素在文档里面触发时都会冒泡 如果每个层上都有alert事件,那么触发里层div时,alert 里层,外层,最外层. 为了防止事件之间干扰,需要阻止事件冒泡. 一般使用e.stopPropagation(); ie8及其以下不支持,需要使用e.cancelBubble=false: 另外e是用来获得window的全局对象.e可以使用任意其他字母或者单词代替,比如a,b,c,d....,event,obj等等. 每当触发一个事件,系统都会给这个事件传一个对象,从而获得全局对象. 比如通过e

阻止事件冒泡和阻止后续代码执行

冒泡事件是点击子集标签的事件会触发父级标签的事件: 对应的jQuery代码如下: <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 为内层div绑定click事件 $("#msg").click(function(

JS_stopPropagation, preventDefault 和 return false

因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagation(), preventDefault() 和 return false. 它们之间有什么区别, 该何时使用呢? 将在本文中进行讲解. 术语 监听事件, 在在节点上能被监听的页面操作. 如: select 节点的 change 事件, a 节点的 click 事件.浏览器默认动作, 指特定页面元素