阻止事件（取消其默认行为并阻止其传播）

最新推荐文章于 2022-06-30 14:39:24 发布
最新推荐文章于 2022-06-30 14:39:24 发布
阅读量522 收藏 2
点赞数
分类专栏： 阻止事件（取消其默认行为并阻止其传播） 阻止事件冒泡 文章标签： 阻止事件取消其默认行为并阻止其传播 阻止事件冒泡
本文介绍了三种JavaScript函数实现：完全阻止事件（包括取消默认行为和停止传播）、仅停止事件冒泡、仅取消事件的默认行为。适用于跨浏览器兼容性的事件处理。

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

一。取消浏览器对事件的默认行为（响应）（比如标签的跳转等）并停止事件的继续传播。

    function stopEvent (evt) {
        var evt = evt || window.event;
        if (evt.preventDefault) {
            evt.preventDefault();
            evt.stopPropagation();
        } else {
            evt.returnValue = false;//IE
            evt.cancelBubble = true;//IE
        }
    }

二。只阻止事件继续传播（不取消默认行为）即停止事件冒泡
    
    function stopEvent (evt) {
        var evt = evt || window.event;
        if (evt.stopPropagation) {
            evt.stopPropagation();
        } else {
            evt.cancelBubble = true;//IE
        }
    }

三。只取消默认行为（不阻止事件的继续传播）

    function stopEvent (evt) {
        var evt = evt || window.event;
        if (evt.preventDefault) {
            evt.preventDefault();//DOM
        } else {
            evt.returnValue = false;//IE
        }
    }
js取消默认行为和阻止事件传播的方式
猿码互联
06-03 858
当一个元素上触发某个事件时，事件会从该元素开始沿着 DOM 树向上传播，直到到达根元素。通过阻止事件传播，可以阻止事件继续向上传播，即停止事件冒泡。默认情况下，当用户触发某些事件时（如点击链接、提交表单等），浏览器会执行默认的操作。通过取消默认行为，可以阻止浏览器执行这些默认操作。需要注意的是，还有一种方法可以同时取消默认行为和阻止事件传播，即调用。在上述示例中，当点击链接时，既取消了默认行为，也阻止了事件传播。在上述示例中，当点击内部元素时，事件处理函数会调用。在上述示例中，我们通过调用。
React中事件的用法
热门推荐
09-11 3万+
一、事件处理函数的使用 鼠标事件： onClick onContextMenu onDoubleClick onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp onDrop onDrag onDragEnd onDragEnter onDragExit
阻止事件默认行为（取消事件默认行为）
大脸小覃的博客
10-09 404
阻止事件默认行为（取消事件默认行为）：event.preventDefault();ie678以下不兼容 ie678用:event.returnValue = false; 方法 一： ev.preventDefault ? ev.preventDefault() : ev.returnValue = false; 方法 二： return false;–只能在句柄式绑定事件中 ...
取消冒泡和阻止默认事件
Hhjian524的博客
10-29 1112
取消冒泡： W3C标准 event.stopPropagation();但不支持ie9以下版本 IE独有 event.cancelBubble = true; 封装阻止默认事件的函数 cancelHandler(event); function stopBubble(event){ if(event.stopPropagation){ event.stopPropagati...
阻止事件冒泡
csdncsdn9876的博客
06-05 349
跨浏览器解决方法                                function showMessage(event){             alert(event.target.nodeName);             event.stopPropagation();         }         function showBox
JS传播事件、取消事件默认行为、阻止事件传播详解
10-19
JavaScript中的事件处理是Web开发中的核心概念，它涉及到事件的传播、取消默认行为以及阻止事件传播等关键点。本文将详细解析这些概念。 首先，**事件处理程序的返回值**在JavaScript中扮演着一个特殊的角色。当...
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
09-04
2. 只阻止事件的传播（不取消默认行为）： ```javascript function stopPropagationOnly(evt) { var evt = evt || window.event; if (evt.stopPropagation) { evt.stopPropagation(); } else { evt....
阻止默认事件
letterTiger的博客
10-12 4326
事件传播流程，先是事件捕获然后处于目标阶段然后事件冒泡。还有阻止默认事件（preventDefault()）的阻止标签默认行为。
js 停止事件冒泡 阻止浏览器的默认行为
weixin_33938733的博客
03-05 161
在前端开发工作中，由于浏览器兼容性等问题，我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。浏览器默认行为：在form中按回车键就会提交表单；单击鼠标右键就会弹出context menu.a标签1..停止事件冒泡JavaScript代码1//如果提供了事件对象，则这是一个非IE浏览器2if(e&&e.stopPropagation)3//...
事件（阻止事件传播、阻止默认事件、事件源对象、事件委托）
巧克力很苦的小博客
09-06 1266
阻止事件传播 阻止事件传播e.stopPropagation() 谷歌浏览器 阻止事件传播（冒泡阶段） var oBig = document.getElementById('big'); var oSmall = document.getElementById('small'); oBig.addEventListener('click',func...
javascript阻止事件默认行为，阻止事件传播冒泡，兼容IE
qq_41974199的博客
04-10 1203
javascript阻止事件默认行为，阻止事件传播冒泡，兼容IE 文章目录javascript阻止事件默认行为，阻止事件传播冒泡，兼容IE1：兼容写法2：禁止元素默认行为3：禁止元素事件传播冒泡 1：兼容写法 兼容ie的默认行为，事件传播： let eventUtil = { //默认行为 preventDefault:function(event){ if(event.preventDefault){ event.preventDefault() }else{ event.retu
JavaScript 取消默认事件、阻止事件冒泡的方法
编程界明世隐的博客
12-16 1537
首先页面上创建一个a标签：<a href="#" onclick="do_Click()">默认事件</a> 然后给body加一个点击事件： document.body.onclick=function(){ alert('body'); } 当我点击这个a标签的时候会有两个我们不想发生的事情： 1.浏览器地址尾部出现 # 号，这是a标签的默认事件。 2.alert('body'); 被执行了，这是事件冒泡。 针对这两个有专门的控制方...
阻止事件默认行为和事件冒泡行为
cloudyless的博客
06-30 2736
阻止事件默认行为和冒泡行为
阻止事件传播的常用方法
mx_kui的博客
10-17 1698
1、阻止事件的默认行为 function preventDefa(e){   if(window.event){     //IE中阻止函数器默认动作的方式      window.event.returnValue = false;    }   else{     //阻止默认浏览器动作      e.preventDefault();   }  2、阻止事件冒...
React系列五——event事件
可芭乐的博客
02-28 8133
从子组件传递数据给父组件 commentForm组件 'use strict' import React from 'react' class CommentForm extends React.Component{ handleSubmit(event) { //作用于表单 event.preventDefault(); console...
如何阻止事件冒泡和默认事件
IT修真院：初学者转行到互联网的聚集地
05-20 3576
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【如何阻止事件冒泡和默认事件】 【修真院web小课堂】 大家好，我是IT修真院上海分院第8期的学员周能，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网web任务4，深度思考中的知识点—...
Developer Test-Jquery-阻止冒泡
06-04 197
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开， 2.event.preventDefault()方法 这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到...
举例说明如何阻止事件的默认行为和冒泡传播
最新发布
11-09
在JavaScript中，阻止事件的默认行为通常是指取消浏览器对某个事件的预设处理，比如表单提交、链接跳转等。这通常通过`event.preventDefault()`方法实现。例如： ```javascript (event)">点击我 function ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值