The content of this article is about the usage examples (code) of JavaScript bubbling events. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Note: When the lower element and the upper element support the same event, when the upper event is triggered, the lower event is also triggered. This is called event bubbling.
Cancel event bubbling: ev.cancelBubble = true
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background:yellow;}
div{
width:300px;
height:300px;
background:green;
}
</style>
</head>
<body onclick="di()">
<div onclick="ding()"></div>
</body >
<script>
function di(){
alert('底层')
}
function ding(e){
var ev = e|| event
// 取消事件冒泡，其实是阻止事件向下传递
ev.cancelBubble = true
alert('上层社会')
}
</script>
</html>Clicking the upper div will also trigger the lower event. To cancel bubbling, just: ev.cancelBubble = true
The above is the detailed content of Usage example of javascript bubbling event (code). For more information, please follow other related articles on the PHP Chinese website!
How to light up Douyin close friends moment
Advantages of downloading the official website of Yiou Exchange App
How to enter the d drive with cmd
What should I do if my QQ account is stolen?
Migrate data from Android phone to Apple phone
sort function python usage
Introduction to the main work content of front-end engineers
Photo display time
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
