在网页中的html里呈现一个dom树的结构,如果用户在网页里触发一个事件,这个事件也会一层一层的网上传递,但是我们网页上有时候可以想事件传到某一层后就不要再往上传了,那这样的话,我们可以用用javascript来阻止事件往上传,
有一个例子,例子很简单:
<html>
<head>
<script type="text/javascript">
function test1(evt){
alert(1);
stopevent(evt);
}
function test2(){
alert(2);
}
function stopevent(evt){
var e=(evt)?evt:window.event;
if (window.event) {
e.cancelBubble=true;
} else {
e.stopPropagation();
}
}
</script>
</head>
<body>
<form onclick="test2()">
<select id="select1" onclick="test1(event)">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<br />
</form>
</body>
</html>
网页代码很简单,当我click这个select的时候,会触发select的onclick的事件,那这个事件会处理触发test1这个function,由于html中js事件是冒泡一样的,把select事件中的click这个事件往上传,于理这个click的事件传到form这一层,会触发form的onclick这个事件( function test2会被调用);
但是由于
function test1(evt){
alert(1);
stopevent(evt);
}
由于test1中stopevent(evt)就阻止了select的click事件往上传,于是form节点上会收不到onclick事件,于是不会再触发test2这个function。
如果把
//stopeven(evt);注释掉后就会往上传。