<! DOCTYPEhtml>      
<html lang="en">      
<head>      
    <meta charset="UTF-8">      
    <title>Preventing event bubbling prevents the browser's default behavior</title>    
    <style type="text/css">
    </style>     
</head>      
<body>
	<button id="btn1">Button 1</button>
	<input type="text" id="m-text">
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
	<script type="text/javascript">
		$(function() {
			function stopBubble(e) { 
				// If event objects are provided, this is a non-IE browser
				if (e && e.stopPropagation) {
					// Therefore it supports the W3C stopPropagation() method
					e.stopPropagation(); 		
				} else {
					// Otherwise, we need to use IE to cancel event bubbling
					window.event.cancelBubble = true; }} $('body').on('click'.function() {
				console.log('body');
			});
			$('#btn1').on('click'.function(e) {
				console.log('button 1');
				stopBubble(e); // Prevent bubbling
			});

			// Block the browser's default behavior
			function stopDefault(e) { 
				// Block the default browser action (W3C)
				if (e && e.preventDefault) {
					e.preventDefault(); 
				} else { // Block the default action of the function in IE
					window.event.returnValue = false; 
				}
				return false; 
			}			
			$('#m-text').on('keydown'.function(e) {
  				console.log(String.fromCharCode(e.keyCode));
  				stopDefault(e);
			});
		});
	</script>
</body>      
</html> 
Copy the code

\