本文介绍了HTML中气泡事件系统的概念及其实现方式，并通过一个具体的示例演示了如何使用`event.cancelBubble=true;`来取消事件的向上冒泡行为。
气泡事件系统属于一种阶层架构的事件处理系统，即触发子标签也会触发父标签。
<html>
<head>
<title>气泡事件系统</title>
</head>
<body onclick="alert('<body>');">
<h2>气泡事件系统</h2>
<hr>
<form name="myForm" onclick="alert('myForm');">
用户名称:
<input type="text" name="myName" onclick="alert('myName');"><br>
<input type="radio" name="mySex" value="female" onclick="alert('mySex');">男
<input type="radio" name="mySex" value="male" onclick="alert('mySex');">女
<br>
<input type="button" name="myButton" value="按一下" onclick="alert('myButton');">
</form>
</body>
</html>
根据需要来取消气泡事件
关键句;
event.cancelBubble = true;
代码如下：
<html>
<head>
<title>取消气泡事件</title>
<script language="JavaScript">
// 取消气泡事件
function cancelEvent(){
alert('myButton');
event.cancelBubble = true;
}
</script>
</head>
<body onclick="alert('<body>');">
<h2>取消气泡事件</h2>
<hr>
<form name="myForm" onclick="alert('myForm');">
用户名称:
<input type="text" name="myName" onclick="alert('myName');"><br>
<input type="radio" name="mySex" value="female" onclick="alert('mySex');">男
<input type="radio" name="mySex" value="male" onclick="alert('mySex');">女
<br>
<input type="button" name="myButton" value="按一下" onclick="cancelEvent()">
</form>
</body>
</html>
扫一扫
855
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
