Javascript如何阻止事件的默认行为？

最新推荐文章于 2024-06-24 15:18:03 发布

不用打火机

最新推荐文章于 2024-06-24 15:18:03 发布

阅读量7.7k

点赞数 1

分类专栏：前端文章标签：前端 javascript html

原文链接：https://www.itcast.cn/news/20211029/16082574251.shtml

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

阻止浏览器默认行为和防止事件传播主要通过先下面两个方法实现

event.preventDefault()： 取消浏览器对当前事件的默认行为，比如点击链接后，浏览器跳转到指定页面，或者按一下空格键，页面向下滚动一段距离。

event.stopPropagation()： 阻止事件在DOM中继续传播，防止再触发定义在别的节点上的监听函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阻止浏览器默认行为-黑马程序员web前端培训高手班http://web.itheima.com</title>
</head>
<body>
    <div id="div2">2
        <div id="div1">1
            <a id="a" href="http://www.itheima.com" target="_blank">黑马程序员</a>
        </div>
    </div>
</body>
<script>
    var d2 = document.getElementById('div2');
    var d1 = document.getElementById('div1');
    var a = document.getElementById('a');
    d2.onclick = function(e){
        alert('d2');
    }
    d1.onclick = function(e){
        alert('d1');
    }
    a.onclick = function(e){
        alert('a');
    }
</script>
</html>

未阻止浏览器默认行为和阻止事件传播之前

未阻止之前效果

阻止浏览器默认行为

<script>
    var d2 = document.getElementById('div2');
    var d1 = document.getElementById('div1');
    var a = document.getElementById('a');
    d2.onclick = function(e){
        alert('d2');
    }
    d1.onclick = function(e){
        alert('d1');
    }
    a.onclick = function(e){
        alert('a');
        // 阻止浏览器默认行为
        e.preventDefault();
    }
</script>
</html>

由于e.preventDefault()阻止了浏览器默认行为，所以点击“黑马程序员”，不会跳转黑马程序员官网。

阻止浏览器行为之后效果

阻止事件传播

<script>
    var d2 = document.getElementById('div2');
    var d1 = document.getElementById('div1');
    var a = document.getElementById('a');
    d2.onclick = function(e){
        alert('d2');
    }
    d1.onclick = function(e){
        alert('d1');
    }
    a.onclick = function(e){
        //阻止事件传播
        e.stopPropagation();
        alert('a');
    }
</script>

由于e.stopProgation()阻止了事件传播，d1和d2对象绑定的事件不会再触发，直接跳转都了http://www.itheima.com。

阻止事件传播效果

文章转自：黑马程序员web前端课程 http://web.itheima.com

不用打火机

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Javascript如何阻止事件的默认行为？

阻止浏览器默认行为和防止事件传播主要通过先下面两个方法实现event.preventDefault()：取消浏览器对当前事件的默认行为，比如点击链接后，浏览器跳转到指定页面，或者按一下空格键，页面向下滚动一段距离。event.stopPropagation()：阻止事件在DOM中继续传播，防止再触发定义在别的节点上的监听函数。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF..
复制链接

扫一扫

专栏目录