JS阻止冒泡和元素默认事件

文章目录

JS阻止冒泡和元素默认事件
- 1.JS阻止冒泡 :stopPropagation()
- 2.阻止元素默认事件行为
- - preventDefault()
  - onclick + return false
  - 接管行为

1.JS阻止冒泡 :stopPropagation()

<body><div class="wrap"><div class="inner"></div></div><script>let oWrap = document.querySelector(".wrap")let oInner = document.querySelector(".inner")oInner.addEventListener("click",function(e){e.stopPropagation()console.log("我是内部inner");},false)oWrap.addEventListener("click",function(){console.log("我是外部wrap");},false)</script>
</body>

2.阻止元素默认事件行为

preventDefault()

默认元素事件:例如a元素,点击后会自动跳转页面

<body><a href="http://www.baidu.com">这是一首简单的小情歌</a><script>let oA = document.querySelector("a")oA.addEventListener("click",function(e){e.preventDefault()console.log("我是a");},false)</script>
</body>

备注:点击后,不会自动跳转了！

onclick + return false

oncilck可以阻止默认事件,而addEventListener不可以！！

<body><a href="http://www.baidu.com">这是一首简单的小情歌</a><script>let oA = document.querySelector("a")oA.onclick = function(e){return false;}// oA.addEventListener("click",function(e){//   return false;// })</script>
</body>

接管行为

<a href="javascript:;">这是一首简单的小情歌</a>

JS阻止冒泡和元素默认事件相关推荐

JS阻止冒泡和取消默认事件(默认行为)
阻止事件冒泡 function stopPropagat(e) {if (e && e.stopPropagation) {e.stopPropagation();//标准浏览器} e ...
js阻止子元素事件_JS阻止冒泡和取消默认事件(默认行为)-前端开发博客
js冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播.使用event.preventDefault()可以取消默认事件.对于冒 ...
JavaScript阻止冒泡和取消默认事件(默认行为)
JavaScript冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播.使用event.preventDefault()可以取消 ...
jQuery阻止冒泡和HTML默认操作
jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. jQuery是一个快捷简便的JavaScript框架,说 ...
js阻止冒泡事件发生(react)
其实就两个函数 event: MouseEvent event.preventDefault(); event.stopPropagation(); 事件冒泡和事件捕获 event.stopPropa ...
js阻止冒泡的方式-完整版
js阻止冒泡的方式-完整版直接讲结论: 1.原生js 两种方式绑定事件 onclick 和 addEventListener 阻止冒泡的唯一方式为 var e = window.event || a ...
设置网页右键点击，并阻止右键点击默认事件
设置网页右键点击,并阻止右键点击默认事件 //为当前文档添加鼠标右击事件,防止默认的右击菜单弹出 document.oncontextmenu=Youji; function Youji(){aler ...
js阻止冒泡，兼容写法。
有几次遇到a链接里面包含click点击方法,这时候会触发click事件,还会触发a链接跳转.这时候就需要阻止冒泡了. 添加 event.stopPropagation(); 就可以了.在chrome上 ...
js 阻止冒泡事件和默认事件
阻止事件冒泡 window.enent ? window.enent.cancelBubble = true : e.stopPropagation()function stopBubble(even ...

JS阻止冒泡和元素默认事件

JS阻止冒泡和元素默认事件

文章目录

1.JS阻止冒泡 :stopPropagation()

2.阻止元素默认事件行为

preventDefault()

onclick + return false

接管行为

JS阻止冒泡和元素默认事件相关推荐

最新文章

热门文章