<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡 阻止浏览器的默认行为</title>
<style type="text/css">
</style>
</head>
<body>
<button id="btn1">按钮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) {
//如果提供了事件对象，则这是一个非IE浏览器
if (e && e.stopPropagation) {
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
} else {
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
}
$('body').on('click', function() {
console.log('body');
});
$('#btn1').on('click', function(e) {
console.log('按钮1');
stopBubble(e); //阻止冒泡
});
//阻止浏览器的默认行为
function stopDefault(e) {
//阻止默认浏览器动作(W3C)
if (e && e.preventDefault) {
e.preventDefault();
} else { //IE中阻止函数器默认动作的方式
window.event.returnValue = false;
}
return false;
}
$('#m-text').on('keydown', function(e) {
console.log(String.fromCharCode(e.keyCode));
stopDefault(e);
});
});
</script>
</body>
</html>