HTML DOM stopPropagation()事件方法

HTML DOM stopPropagation() Event method

HTML DOM stopPropagation()事件方法用于停止给定元素的传播。这意味着使用stopPropagtion()方法，单击父元素不会传播到子元素，而单击子元素也不会传播到父元素。事件传播也称为事件冒泡。

句法

以下是stopPropagation()事件方法的语法-

1	event.stopPropagation()

例

让我们看一下stopPropagation()事件方法的示例-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!DOCTYPE html>
<html>
<head>
<style>
#DIV_1 {
background: lightpink;
width:130px;
height:130px;
margin-left:40%;
text-align:center;
}
#IMG_1 {
width:100px;
height:100px;
position:relative;
left:5px;
}
</style>
</head>
<body>
stopPropagation() method example

DIV ELEMENT
<img onclick="InnerImg(event)" id="IMG_1" src="https://www.tutorialspoint.com/hibernate/images/hibernate-mini-logo.jpg">

Stop propagation:
<input type="checkbox" id="check">

function InnerImg(event) {
confirm("Inner Image is clicked");
if (document.getElementById("check").checked) {
event.stopPropagation();
}
}
function OuterDiv() {
confirm("Outer div is clicked");
}

</body>
</html>

输出量

这将产生以下输出-

在单击div元素内的Image元素而不先单击停止传播方法时-

点击上方的"确定"时-

选中"停止传播"复选框，然后单击内部图像-