阻止事件默认行为

最新推荐文章于 2022-09-15 14:42:59 发布

lwq_qqq

最新推荐文章于 2022-09-15 14:42:59 发布

阅读量771

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/m0_48180834/article/details/119613775

版权

首先来了解下事件的默认行为：

网页元素的默认行为有：点击a标签时会有一个跳转行为，form表单中点击提交按钮时网页会网页会产生提交行为并刷新网页。

有些情况下要阻止该默认行为，在事件加载完成后执行，这里使用的是window.οnlοad=function(){}事件加载，那么以按钮为例进行分析：

需要先获取要阻止默认行为的dom节点
为该按钮绑定点击事件，在绑定事件的函数体内执行event.preventDefault();

完整代码（阻止事件默认行为）：

<!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>事件默认行为</title>
    <script>
        window.onload=function(){
            // 获取需要阻止默认行为的dom节点
            var btn=document.getElementsByTagName('button')
            var btn1=document.getElementsByTagName('button')[0]
            console.log(btn);
            console.log(btn1);
            // 绑定点击事件
            btn.onclick=function(event){
                // 阻止事件默认行为
                event.preventDefault()
            }
        }
    </script>
</head>
<body>
    <form action="">
        <button>提交</button>
    </form>
</body>
</html>

lwq_qqq

关注

1
点赞
踩
0

收藏

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

首先来了解下事件的默认行为：网页元素的默认行为有：点击a标签时会有一个跳转行为，form表单中点击提交按钮时网页会网页会产生提交行为并刷新网页。有些情况下要阻止该默认行为，在事件加载完成后执行，这里使用的是window.onload=function(){}事件加载，那么以按钮为例进行分析：需要先获取要阻止默认行为的dom节点为该按钮绑定点击事件，在绑定事件的函数体内执行event.preventDefault();完整代码（阻止事件默认行为）：<!DOCTYPE html&.
复制链接

扫一扫