什么是事件冒泡,事件捕获?

事件传递有两种方式:冒泡捕获

事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?

在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。

在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型:

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。

1.event.stopPropagation()方法

这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开,

2.event.preventDefault()方法

这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;

3.return false  ;

这个方法比较暴力,他会同事阻止事件冒泡也会阻止默认事件;写上此代码,连接不会被打开,事件也不会传递到上一层的父元素;可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()

demo:

div与css代码:

.box1{
height: 200px;
width: 600px;
margin: 0 auto;
}
.box1 a{
display: block;
height: 50%;
width: 50%;
background:red;
} <div class="box1">
<a href="http://www.baidu.com" target="_blank"></a>
</div>

js代码:

情况1:不阻止事件冒泡和默认事件

//不阻止事件冒泡和默认事件
$(".box1").click(function(){
console.log("1")//不阻止事件冒泡会打印1,页面跳转;
});

情况2:阻止冒泡

//阻止冒泡
$(".box1 a").click(function(event){
event.stopPropagation();//不会打印1,但是页面会跳转; }); $(".box1").click(function(){
console.log("1");
});

情况3:阻止默认事件

$(".box1 a").click(function(event){
//阻止默认事件
event.preventDefault();//页面不会跳转,但是会打印出1,
}); $(".box1").click(function(){
console.log("1");
});

情况4:阻止冒泡和阻止默认事件

$(".box1").click(function(){
console.log("1");
});
//阻止冒泡
$(".box1 a").click(function(event){
event.stopPropagation();
//阻止默认事件
event.preventDefault() //页面不会跳转,也不会打印出1
})

情况5:使用false,等于同时调用event.stopPropagation()和event.preventDefault()

$(".box1").click(function(){
console.log("1")
});
$(".box1 a").click(function(event){
return false; //页面不会跳转,也不会打印出1,等于同时调用了event.stopPropagation()和event.preventDefault()
});

原处出处:

祥哥的说

event.stopPropagation()和event.preventDefault()

https://blog.csdn.net/qq_39207948/article/details/79408323

event.stopPropagation()和event.preventDefault()的更多相关文章

  1. 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别

    今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

  2. JS 之 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

    在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...

  3. event.stopPropagation(),event.preventDefault()和return false的区别

    event.stopPropagation(),event.preventDefault()和return false的区别 1.event.stopPropagation()方法 这是阻止事件的冒泡 ...

  4. 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

    1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...

  5. event.stopPropagation()和event.preventDefault(),return false的区别

    我写公司的官网遇到一个问题,轮播图的上一层有一块内容,用鼠标拖动那块内容的时候下一层的轮播图也会跟着拖动,而上面的那层的内容是不会动的,我想这就是冒泡事件在作祟了吧 跟冒泡事件相关的,我想到三个: 1 ...

  6. vue 中 event.stopPropagation() 和event.preventDefault() 使用

    1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向document上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开 ...

  7. event.stopPropagation()与event.preventDefault()

    <div id='div0'> <div id='div1'> <a href="#" id='div2'>2222</a> < ...

  8. event.stopPropagation与event.preventDefault的区别

    1.event.stopPropagation 停止事件的传播,阻止它被分配到其它Dom节点.但是不能阻止同一Dom节点上的其它事件句柄被调用. 注:不同Dom节点的事件必须是一致的.如父节点和子节点 ...

  9. event.stopPropagation()、event.preventDefault()与return false的区别

    做小demo时经常用到return false来取消默认事件,但一直不是很懂它和preventDefault()等的区别,今天查了查文档和大神们的博客,在这里对相关知识点做一个总结 首先开门见山,总结 ...

随机推荐

  1. 用js传递当前页面的url,丢失了&后面的参数 解决办法

    问题:因为登陆是用ajax传值的,在哪个页面点击登陆的,登陆成功跳到再跳回那个页面,之前直接传递的是 /index_do.php?gourl=" +location.href这样传递的,但是 ...

  2. 20190312_浅谈go&java差异(二)

    转载请注明出处:https://www.cnblogs.com/funnyzpc/p/10801474.html 第二节内容概览 循环(for.switch) 多值返回 defer & fin ...

  3. MySQL5.6与MySQL5.7安装的区别

    一.MySQL5.6与MySQL5.7安装的区别 1.cmake的时候加入了boost 下载boost.org 2.初始化时 cd /application/mysql/bin/mysql 使用mys ...

  4. 复杂的POI导出Excel表格(多行表头、合并单元格)

    poi导出excel有两种方式: 第一种:从无到有的创建整个excel,通过HSSFWorkbook,HSSFSheet HSSFCell, 等对象一步一步的创建出工作簿,sheet,和单元格,并添加 ...

  5. Linux tree

    tree命令,是大小写敏感的.常用的是:1.tree -C 颜色显示 2.tree -f 显示文件全路径ls -R也可以显示树结构,但没上面 清晰 3.tree -L n n 是数字,表示显示几层 4 ...

  6. 004.Windows Server 故障转移群集 (WSFC)简介

    一 WSFC 简介 1.1 WSFC 概述 “Windows Server 故障转移群集”(WSFC) 群集是一组独立的服务器,它们共同协作以提高应用程序和服务的可用性.SQL Server 2012 ...

  7. python图片爬虫 - 批量下载unsplash图片

    前言 unslpash绝对是找图的绝佳场所, 但是进网站等待图片加载真的令人捉急, 仿佛是一场拼RP的战争 然后就开始思考用爬虫帮我批量下载, 等下载完再挑选, 操作了一下不算很麻烦, 顺便也给大家提 ...

  8. Java描述设计模式(05):原型模式

    本文源码:GitHub·点这里 || GitEE·点这里 一.原型模式简介 1.基础概念 原型模式属于对象的创建模式.通过给出一个原型对象来指明所有创建的对象的类型,然后用复制这个原型对象的办法创建出 ...

  9. SpringBoot无法访问webapp目录下的文件

    springboot version:2.1.9-RELEASE 解决方案: 在pom中添加此段 完美解决,代码的作用是让src/main/webapp在编译的时候在resoureces路径下也生成w ...

  10. 在Windows下配置多个git账号

    1.生成并部署SSH key 安装好Git客户端后,打开git bash,输入以下命令生成user1的SSH Key: ssh-keygen -t rsa -C "user1@email.c ...