Js 中的preventDefault 和 stopPropagation 方法

最新推荐文章于 2024-01-31 19:57:12 发布

@朱较瘦

最新推荐文章于 2024-01-31 19:57:12 发布

阅读量634

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript

本文链接：https://blog.youkuaiyun.com/zhulongxi/article/details/51889816

Javascript 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了JavaScript中preventDefault()和stopPropagation()方法的使用。preventDefault()用于阻止元素的默认行为，例如阻止链接跳转。stopPropagation()则用于阻止事件冒泡，使事件不向上层元素传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.preventDefault （）

用来阻止元素默认行为的发生而发生其他行为，如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西，起的作用就是点击百度链接到http://www.baidu.com,这是属于<a>标签的默认行为，如果在点击时候调用preventDefault（）方法执行其他行为，则不会跳到百度页面：

<head>
    <title></title>
	<meta charset="utf-8" />
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="JavaScript.js"></script>
    <script>
        function stopDefault(e) {
            if (e && e.preventDefault)
                e.preventDefault();
            else
                window.event.returnValue = false;

            return false;
        }
    </script>
</head>

<body>
    <input type="button" id="btn_test" req="f" value="Click"/>
    <a href="http://www.baidu.com" id="testLink">百度</a>
</body>
<script>
        var test = document.getElementById('testLink');
        test.onclick = function (e) {
            alert('我的链接地址是：' + this.href + ', 但是我不会跳转。');
            stopDefault(e);
        }
</script>

直接弹出对话框，而不跳转到百度页面；

2.stopPropagation （）；

js中的事件代理：

事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。对任何一个事件来说，其目标元素都是原始元素，在我们的这个例子中也就是按钮。目标元素它在我们的事件对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待事件从它的子级元素里冒泡上来，并且可以很方便地判断出这个事件是从哪个元素开始的。

stopPropagation方法就是起到阻止js事件冒泡的作用:

<script>
        function doSomething(obj, evt) {
            alert(obj.id);
            var e = (evt) ? evt : window.event;
            if (window.event) {
                e.cancelBubble = true;// ie下阻止冒泡
            } else {
                //e.preventDefault();
                e.stopPropagation();// 其它浏览器下阻止冒泡
            }
        }
    </script>

<body>
    <div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">
        <p>This is parent1 div.</p>
        <div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">
            <p>This is child1.</p>
        </div>
        <p>This is parent1 div.</p>
    </div>
    <br />
    <div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
        <p>This is parent2 div.</p>
        <div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
            <p>This is child2. Will bubble.</p>
        </div>
        <p>This is parent2 div.</p>
    </div>
</body>