阻止默认行为：比如a链接的跳转。阻止冒泡：子元素的事件触发到了父元素身上

最新推荐文章于 2023-02-20 16:44:35 发布

肖肖肖丽珠

最新推荐文章于 2023-02-20 16:44:35 发布

阅读量1.1k

点赞数

分类专栏：前端小知识

本文链接：https://blog.csdn.net/qq_33769914/article/details/77677970

版权

前端小知识专栏收录该内容

209 篇文章 3 订阅

订阅专栏

阻止默认行为：

阻止提交按钮默认提交表单的动作

<body>
    <form  id="form" action="">
        <input type="text" name="user"><br/><br/>
        <input type="submit" value="提交">
        <p>本演示可以阻止提交按钮默认提交表单的动作</p>
    </form>
    <script type="text/javascript">
        var form = document.getElementById("form");
        form.addEventListener("submit", function (event) {
            //阻止表单的默认提交事件
            event.preventDefault();
        }, false);
    </script>
</body>

阻止事件冒泡：

正常情况当把鼠标放在外部div和内部div重合的区域的时候，连个div都可以收到事件。当在内部div的处理程序添加stopPropagation()方法后,则鼠标放在重合区域的上方是外部div就收不到冒泡事件了

<body>
    <div id="outer">
         <div id="inner"></div>
    </div>
    <script type="text/javascript">
        var outer = document.getElementById("outer");
        var inner = document.getElementById("inner");
        outer.addEventListener("mouseover", function (event) {
            console.log("外部的div....")
        }, false);
        inner.addEventListener("mouseover", function (event) {
            console.log("内部的div");
            event.stopPropagation();
        }, false);      
    </script>
</body>

肖肖肖丽珠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
阻止默认行为：比如a链接的跳转。阻止冒泡：子元素的事件触发到了父元素身上

阻止默认行为：阻止提交按钮默认提交表单的动作<body> <form id="form" action=""> <input type="text" name="user"><br/><br/> <input type="submit" value="提交"> ...
复制链接

扫一扫