event.stopPropagation()和event.preventDefault()

最新推荐文章于 2022-03-22 15:04:50 发布
最新推荐文章于 2022-03-22 15:04:50 发布
阅读量385 收藏 1
点赞数
分类专栏： Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36836277/article/details/88692137
版权
1.event.preventDefault()

preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）

2.event.stopPropagation()

event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。尤其是点击事件。

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("span").click(function(event){
    event.stopPropagation();
    alert("The span element was clicked.");
  });
  $("p").click(function(event){
    alert("The p element was clicked.");
  });
  $("div").click(function(){
    alert("The div element was clicked.");
  });
});
</script>
</head>
<body>

<div style="height:100px;width:500px;padding:10px;border:1px solid blue;
			background-color:lightblue;">
This is a div element.
<p style="background-color:pink">This is a p element, in the div element.
<br><span style="background-color:orange">This is a span element in the p
	and the div element.</span></p></div>
</body>
</html>
道雄
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js事件之event.preventDefault()与event.stopPropagation()简单介绍
iamlegendary的博客
01-13 1303
event.preventDefault()用法介绍：该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。 例如，如果 type 属性是 “submit”，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。 注意：如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用
阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别...
weixin_33774615的博客
11-11 1811
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开， 2.event.preventDefault()方法 这是阻止默认事件的方法，调用此方法是，连接不会被打开，...
阻止事件冒泡(event.stopPropagation())/阻止默认事件(event.preventDefault())
HELLO WORLD
10-05 2823
event.stopPropagation() stopPropagation方法阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数。 function stopEvent(e) { e.stopPropagation(); } el.addEventListener('click', stopEvent, false); 上...
阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别
热门推荐
积少成多
11-11 10万+
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开， 2.event.preventDefault()方法 这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父...
js中的preventDefault与stopPropagation详解
12-12
首先讲解一下js中preventDefault和stopPropagation两个方法的区别：preventDefault方法的起什么作用呢？我们知道比如百度,这是html中最基础的东西，起的作用就是点击百度链接到http://www.baidu.com,这是属于标签的...
event对象的方法 兼容多浏览器
11-30
代码如下:function getEvent(){ //同时兼容ie和... if(arg0){ if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)==”object” && arg0.preventDefault && arg0.stopPropagation)){ ret
ng-event-options:在角度模板中启用事件选项（捕获，被动，...）
05-14
stopImmediatePropagation ， stopPropagation和preventDefault其他事件选项 事件操作员对throttle和debounce支持 用于在NgZone外部NgZone并且仅在platformBrowser内部绑定的角度事件选项 该模块仅压缩3KB ，因此...
event-helpers:实用程序和装饰器来帮助处理事件
06-06
事件助手一组 utils 和 ES7 装饰器，可帮助您处理事件。安装 npm install --save event-helpers例子以下是使用事件助手提供的一些实用程序功能的几个示例。停止传播前： $ ( '#mybutton' ) . on ( 'click' , ...
event:支持旧版浏览器的事件绑定组件
06-20
API： 事件处理程序接收目标元素，因为它是this上下文事件处理程序接收事件，因为它是第一个参数event对象分配了.target event对象具有.preventDefault()方法event对象有.stopPropagation()方法安装 $ component ...
event.preventDefault() 和 event.stopPropagation()方法之间有什么区别？如何知道是否在元素中使用了event.preventDefault()方法？
liuhao9999的博客
03-22 980
event.preventDefault()方法可防止元素的默认行为。如果在表单元素中使用，它将阻止其提交。如果在锚元素中使用，它将阻止其导航。如果在上下文菜单中使用，它将阻止其显示或显示。event.stopPropagation()方法用于阻止捕获和冒泡阶段中当前事件的进一步传播。 我们可以在事件对象中使用event.defaultPrevented属性。它返回一个布尔值用来表明是否在特定元素中调用了event.preventDefault()。 ...
使用 event.stopPropagation() 阻止事件传播
倪琛的博客
12-07 649
目录背景DOM 事件传播模型分析一下我上面的例子使用 event.stopPropagation() 阻止事件传播参考连接 背景 我最近参与的项目涉及开发一个公司内部使用的组件库，我在开发一个搜索框组件时遇到了一个麻烦的问题。简单来说是： 点击外层容器会聚焦在输入框上。这是别人写的底层组件上的逻辑，不方便改； 我希望点击容器中的 icon 时（是个返回箭头），输入框会失焦。 写好 event handler 之后试了一下发现，每次点击容器内部的 icon，都无法实现失焦的效果。显然，内部 icon 的
event.stopPropagation()需要注意的一点
qupeng666的博客
07-28 4676
众所周知 event.stopPropagation() 是阻止事件冒泡和捕获； 需要注意的是：虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点. 补充一点： 你点击的元素目标(自身触发事件,是冒泡还是捕获无所谓)，所以点击的当前元素目标 从上往下执行，不分冒泡类型或者捕获类型。 例如：var outA = document.getE
event.preventDefault()、event.stopPropagation()、event.stopImmediatePropagation()思考
qq_28842789的博客
05-07 2648
event.preventDefault() MDN解释: Event接口的preventDefault()方法，告诉user agent：如果此事件没有被显式处理，它默认的动作也不应该照常执行。此事件还是继续传播，除非碰到事件侦听器调用stopPropagation()或stopImmediatePropagation()，才停止传播。 个人理解： 事件后续动作别执行了，如subm...
event.preventDefault()与event.stopPropagation()用法区别
weixin_30480651的博客
08-16 109
【转】event.preventDefault()与event.stopPropagation() event.preventDefault()用法介绍 该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 E...
事件处理器中经常需要调用 event.preventDefault() 或 event.stopPropagation()
curry_zhao的博客
10-10 802
在事件处理器中经常需要调用 event.preventDefault() 或 event.stopPropagation()。尽管我们在方法内可以轻松做到，不过让方法是纯粹的数据逻辑而不处理 DOM 事件细节会更好。为了解决这个问题，Vue.js 为 v-on 提供两个 事件修饰符：.prevent 与 .stop。你是否还记得修饰符是点号打头的指令后缀？
js事件之event.preventDefault()与event.stopPropagation()用法区别
weixin_30780221的博客
12-21 91
event.preventDefault()将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。 ...
Event.preventDefault 、Event.stopPropagation 和 Event.stopImmediatePropagation
草木红的博客
06-21 506
Event.preventDefault() 取消浏览器对当前事件的默认行为。 Event.stopPropagation() 阻止事件冒泡。 Event.stopImmediatePropagation() 阻止同一个事件的其他监听函数被调用，不管监听函数定义在当前节点还是其他节点。也能阻止事件的冒泡。 Event.preventDefault 该方法生效的前提是，事件对象的cancelable属性为true，如果为false，调用该方法没有任何效果。<a id="link" href="h.
event.stopPropagation()和event.preventDefault() 的区别
静静的博客
09-15 764
1.event.stopPropagation() 这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件依然会执行，当你调用这个方法的时候，如果点击一个连接，这个连接仍然会被打开 2.event.preventDefault() 这是阻止默认事件的方法，调用此方法时，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素； 3.return false  ； 这个方法...
我的小程序中使用event.stopPropagation()方法不能阻止页面滚动
最新发布
05-31
如果使用了event.stopPropagation()方法仍然无法阻止页面滚动，可以尝试使用event.preventDefault()方法来阻止默认的事件行为，例如： ``` onWindowMove(event) { event.preventDefault() let touch = event....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值