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

您所在的位置：网站首页 › a标签跳转页面会刷新嘛 › js阻止默认事件（a标签跳转），阻止事件冒泡

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

2023-09-12 15:07| 来源: 网络整理| 查看: 265

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

1.阻止默认事件

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

给a标签中href属性添加链接链接给绑定的事件添加return false 链接 document.getElementById("link").onclick = function (){ console.log("666"); return false; } 使用event事件里的方法链接 document.getElementById("link").onclick = function (e){ console.log("666"); e.preventDefault(); }

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

2.阻止事件冒泡

结构

样式

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

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阻止默认事件（a标签跳转），阻止事件冒泡

今日新闻

推荐新闻