<! DOCTYPE html>
<title>event cancel</title>
<body>
<a href= "https://www.baidu.com/" >baidu</a>
<div style= "width:400px; height:300px; background:red; "id=" D1 ">
<div style= "width:250px; height:250px; Background:yellow; "id=" D2 ">
<button id= "BTN1" >click me</button>
</div>
</div>
</body>
<script type= "Text/javascript" >
document.getElementsByTagName ("a") [0].onclick = function (e) {
Cancelhandler (e); Cancels the A-label open connected event and then executes the Click event
Alert ("Cancel the default event!");
}
function Cancelhandler (event) {
var event = Event | | window.event;//For IE
//Cancel event-related default behavior
if (event.preventdefault) Event.preventdefault ();//Standard Technology
if (event.returnvalue) Event.returnvalue = false;
return false;//handler for handling object property registration.
}
Test Bubble Time
document.getElementById ("D1"). onclick = function () {
Alert ("D1 clicked");
}
document.getElementById ("D2"). onclick = function () {
alert ("D2 clicked"); Click D2 will trigger two click Time, once is D2 own, the second time is Father D1
}
document.getElementById ("Btn1"). onclick = function (e) {
E.stoppropagation (); Stop bubbling Up
Alert ("button clicked");
}
</script>
JavaScript blocks default time and bubbling time