阻止事件冒泡阻止浏览器的默认行为

最新推荐文章于 2025-03-24 01:20:06 发布

原创最新推荐文章于 2025-03-24 01:20:06 发布 · 581 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#阻止事件冒泡 #阻止浏览器的默认行为

web前端同时被 2 个专栏收录

736 篇文章

订阅专栏

前端技术分享

271 篇文章

订阅专栏

本文通过示例代码展示了如何在JavaScript中使用jQuery库来阻止事件冒泡，并介绍了如何阻止浏览器的默认行为。具体包括两种不同的方法：一种是针对非IE浏览器的W3C标准方法，另一种则是适用于IE浏览器的方法。

<!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>