javascript, jQuery阻止默认事件和冒泡事件
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript, jQuery阻止默认事件和冒泡事件,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1449字,纯文字阅读大概需要3分钟。
内容图文
事件冒泡(event bubbling)
事件冒泡是指一个元素上的事件被触发,然后这个事件按嵌套顺序在父级元素上触发,直至document根节点。
例如:
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>
如果单击了页面中的<div>元素,那么事件会按以下顺序传播:
<div> --> <body> --> <html> --> document
也就是说,click 事件首先在<div>元素上发生,这个元素就是被点击的元素。然后,click事件沿着DOM树向上传播,在每一级节点上都会发生,直至document对象。
下图展示了事件冒泡的过程:
js阻止事件冒泡
<script>
var div = document.getElementById("myDiv")
div.onclick = function(event) {
event.stopPropagation()
// 或者直接使用return false,即阻止了事件冒泡也阻止了默认事件
// return false
}
</script>
js阻止默认事件
1.通过on这种方式的绑定的事件,使用return false:
<script>
var div = document.getElementById("myDiv")
div.onclick = function(event) {
return false //使用return false,即阻止了事件冒泡也阻止了默认事件
}
</script>
2.addEventListener绑定的,使用evevt.preventDefault():
<script>
var div = document.getElementById("myDiv")
div.addEventListener( " click ", function(event) {
event.preventDefault()
})
</script>
jQuery阻止事件冒泡和默认事件
阻止事件冒泡:
$(document).ready(function() {
$('#myDiv').click( function(event) {
event.stopPropagation()
})
})
阻止默认事件:
$(document).ready(function() {
$('#myDiv').click( function(event) {
event.preventDefault()
})
})
内容总结
以上是互联网集市为您收集整理的javascript, jQuery阻止默认事件和冒泡事件全部内容,希望文章能够帮你解决javascript, jQuery阻止默认事件和冒泡事件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。