js阻止默认事件（a标签跳转），阻止事件冒泡

最近刚学习完js基础，今天发现对js的默认事件阻止以及阻止事件的冒泡有点忘记，于是写这篇文章算是做一个总结，也是加深一下印象。

1.阻止默认事件

在html中有很多自带默认事件的元素，很典型的例子：a标签，如果给a标签绑定点击事件，触发后页面会有一个刷新，是a链接默认的跳转事件，阻止这个有很多方法

给a标签中href属性添加

<a href="javascript:;">链接</a><a href="javascript:void(0);">链接</a>

给绑定的事件添加return false

<a href="" id="link">链接</a><script>document.getElementById("link").onclick = function (){console.log("666");return false;}
</script>

使用event事件里的方法

<a href="" id="link">链接</a><script>document.getElementById("link").onclick = function (e){console.log("666");e.preventDefault();}
</script>

这个preventDefault()是event阻止默认事件的方法，这里只是用a标签举个例子

2.阻止事件冒泡

结构

<div id="box1"><div id="box2"><div id="box3"></div></div>
</div>

样式

<style>#box1{width: 250px;height: 250px;background-color: pink;}#box2{width: 150px;height: 150px;background-color: lightcoral;}#box3{width: 70px;height: 70px;background-color: lightgreen;}</style>

my$("box3").onclick = function (event) {console.log("里面的盒子");
}
my$("box2").onclick = function () {console.log("中间的盒子")
}
my$("box1").onclick = function () {console.log("外边的盒子")
}

此时点击最里边的小盒子，控制台输出的是这样的

里面的盒子
中间的盒子
外边的盒子

这就是事件的冒泡，从内向外
event鼠标事件对象中stopPropagation()方法来阻止冒泡
在要阻止的对象事件中加入

my$("box3").onclick = function (event) {console.log("里面的盒子");//阻止事件冒泡   event鼠标的事件对象event.stopPropagation();
}

此时的控制台输出为

里面的盒子

阻止事件冒泡成功

这就是我的一点小总结，算是一个印象加深的过程吧！

js阻止默认事件（a标签跳转），阻止事件冒泡相关推荐

JS阻止默认行为和Vue阻止默认行为
目录 JS阻止默认行为: Vue阻止默认行为: 以下是JS阻止默认行为: <!DOCTYPE html> <html lang="en"> <head ...
vue阻止默认_vue中，阻止默认事件
用vue的写法就是: id="freeinput" :rows="6" placeholder="请输入自由条件内容(json格式)" @f ...
js事件-阻止默认操作
默认操作具体指的是什么呢?看如下实例: (1)把单击事件处理程序注册到一个锚元素,而不是一个外层的<div>上,那么就要面对另外一个问题:当用户单击链接时,浏览器会加载一个新页面. (2 ...
js事件冒泡、阻止事件冒泡以及阻止默认行为
大家好,我是IT修真院武汉分院web第17期的学员吴三水,一枚正直纯洁善良的web程序员. 今天给大家分享一下,修真院官网js(职业)任务四,深度思考中的知识点--js事件冒泡.阻止事件冒泡以及阻止默 ...
JS 事件高级（包括DOM事件流，阻止事件冒泡，阻止事件默认行为，，，以及对我来说，很好用的事件代理）
事件对象概念事件处理函数:事件发生时调用的函数事件对象:window.event,内置的对象,事件发生的时候会将所有和事件相关的信息都存储在事件对象中,鼠标位置,事件类型,事件目标... //事件 ...
【JS基础】e.preventDefault() 阻止默认操作
阻止默认操作默认操作具体指的是什么呢?看如下实例: 把单击事件处理程序注册到一个锚元素,而不是一个外层的上,那么就要面对另外一个问题:当用户单击链接时,浏览器会加载一个新页面. 当用户在编辑完表单 ...
阻止默认行为是配合passive使用
在使用lighthouse检测pwa应用时,发现提示下面有下面的警告默认使用passive:true提高滚动性能并减少崩溃,passive即顺从的,是指它顺从浏览器的默认行为.设置该属性的目的主要是 ...
js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 转载...
js添加事件.移除事件.阻止冒泡.阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 网上有关这方面的代码比较多而乱,这里整理一下并加以改进. 添加事件 01 var addEvent = ...
html禁止页面左右滑动,js阻止移动端默认事件以及只阻止横向滚动事件方法
js阻止移动端默认事件,是在相关的touch事件的时候利用event.preventDefault();来阻止默认滚动行为,但是如果要实现阻止横向滚动行为而不阻止竖向滚动行为就要写一个方法通过手指滑动 ...