<style type="text/css">

        .wrapper{
        width:200px;
        height:200px;
        background-color:crimson;
    }
Copy the code

</style>

</head>

<body>

<div class="wrapper"></div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <a href="#">www.baidu.com</a> <br>2) <a href="javascript:alert('a')">demo</a> Writing void() between lines is equivalent to writing the return value return... You can also cancel the default event <a href="javascript:void(false)">demo</a>Copy the code
     <script type="text/javascript">
Copy the code

Cancel bubbling and block default events

Cancel bubbling:

1). W3C standard Event.StopPropagation (); Internet Explorer 9 and later versions are not supported

CancelBubble = true;

Document.onclick =function(){console.log(' friends '); } var div = document.getElementsByTagName('div')[0]; div.onclick=function(e) { // e.stopPropagation(); // e.cancelBubble=true; this.style.background="green"; }Copy the code

Encapsulate the function stopBubble(event) to unbubble

Document.onclick =function(){console.log(' friends '); } var div = document.getElementsByTagName('div')[0]; div.onclick=function(e) { stopBubble(e); this.style.background="green"; } function stopBubble(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; }}Copy the code

Blocking default events

1.return false; Only events registered as object properties take effect // Handle binding event method application version, good compatibility

2.event.preventDefault(); W3C annotation, IE9 following incompatible

3.event.returnValue = false; Compatible with IE

Default events – form submission, a TAB jump, right-click menu, etc

Document.oncontextmenu = function(e){console.log(' Progress together '); return false; // e.preventdefault (); // e.preventdefault (); // method 2 // e.turnValue = false; // method 3}Copy the code

** Encapsulates the function cancelHandler(event) that blocks the default event; 六四屠杀

1) Cancel the right-click menu event
Document. onContextmenu = function(e){console.log(' Progress together '); cancelHandler(e); } function cancelHandler(event){ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; }//return false cannot be wrapped in the function fn()- cannot reach the extent of return false}Copy the code

2) Cancel the default event of a tag (skip function)
var a =document.getElementsByTagName('a')[0]; a.onclick = function(){ return false; } function cancelHandler(event){ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; }}Copy the code