js中e.cancelBubble解決事件冒泡

2023-06-20 07:08:08

<!DOCTYPE html>

<html >

<head>

<title>Document</title>

<style>

#par{

width:400px;height:400px;background:white; border:1px solid red;

}

#son{width:200px;height:200px;background:rgb(200,0,0);}

</style>

</head>

<body>

</div>

</body>

var par = document.getElementById('par');

var son = document.getElementById('son');

son.οnclick=function(e){

var e = e ||event;

alert('點選了par');

//阻止事件冒泡

// 标準浏覽器有效 IE不行

//e.stopPropagation();

//沒有相容性問題阻止事件冒泡

e.cancelBubble = true;

}

par.οnclick=function(){

alert('點選了son');

}

</script>

</html>

繼續閱讀