javascript阻止冒泡事件

<script>function StorePage(){d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://www.365key.com/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'keyit','scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes'));keyit.focus();}</script>

在网页中的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);注释掉后就会往上传。

你可能感兴趣的:(JavaScript,html,apple)