jquery中on动态绑定阻止冒泡事件异常

最新推荐文章于 2022-08-15 19:00:00 发布

可乐6666

最新推荐文章于 2022-08-15 19:00:00 发布

阅读量7k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： CSS HTML JavaScript 文章标签：阻止冒泡 on 事件绑定阻止冒泡异常动态绑定

本文链接：https://blog.youkuaiyun.com/xuexizhe88/article/details/55517477

JavaScript 同时被 3 个专栏收录

23 篇文章

订阅专栏

HTML

13 篇文章

订阅专栏

CSS

11 篇文章

订阅专栏

本文探讨了在使用jQuery的事件委托(on)时，不同选择器设置如何影响事件冒泡的阻止效果。通过实例展示了当父元素与子元素的选择器大小不同时，冒泡是否能被正确阻止的情况。

绪论：如果动态生成的元素用on来绑定事件，会根据selector不同，阻止冒泡的结果也不同。

公共html代码和css样式如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.item{width:500px;height: 50px;background-color: lightsalmon;margin-top: 10px;line-height: 50px;}
			.delete{width: 50px;height: 50px;background-color: lightgreen;}
		</style>
	</head>
 <body>
    <button>添加一个LI</button>
    <ul class="ulwrap">
    	<li class="item"><em>1</em><span class="delete">删除</span></li>
    	<li class="item"><em>2</em><span class="delete">删除</span></li>
    	<li class="item"><em>3</em><span class="delete">删除</span></li>
    	<li class="item"><em>4</em><span class="delete">删除</span></li>
    	<li class="item"><em>5</em><span class="delete">删除</span></li>
    	<li class="item"><em>6</em><span class="delete">删除</span></li>
  </ul>
</body>

   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
     <script type="text/javascript">
     	 $(function(){
     	 	$('button').on("click",function(){
     	 		var lis = $('.item').length + 1;
     	 		var newLi = '<li class="item" onclick="deleteFn()"><em>'+lis+'</em><span class="delete">删除</span></li>';
     	 		$('.ulwrap').append(newLi);
     	 	});
})

1、父节点绑定的父元素selector大于子元素绑定的selector，即父节点绑定的父元素大于子元素绑定的父元素，阻止冒泡正常

 //能阻止冒泡，父元素的selector>子元素的selector
               $('.item').on('click','.delete',function(){
			var n = $(this).parent().index();
			alert("删除第几个==" +  n);
			$(this).parent().remove();
			event.stopPropagation();
		});
		$('.ulwrap').on("click",'.item',function(){
			var n = $(this).index();
			alert("li第几个==" + n);
		});

		//可以能阻止冒泡，父元素的selector>子元素的selector
		$('.ulwrap').on('click','.delete',function(){
			var n = $(this).parent().index();
			alert("删除第几个==" +  n);
			$(this).parent().remove();
			event.stopPropagation();
		});
		$('body').on("click",'.item',function(){
			var n = $(this).index();
			alert("li第几个==" + n);
		});

2、父元素和子元素绑定的父节点为同一个；不能阻止冒泡

		//不可以能阻止冒泡，父元素的selector=子元素的selector
		$('.ulwrap').on('click','.delete',function(){
			var n = $(this).parent().index();
			alert("删除第几个==" +  n);
			$(this).parent().remove();
			event.stopPropagation();
		});
		$('.ulwrap').on("click",'.item',function(){
			var n = $(this).index();
			alert("li第几个==" + n);
		});

3、父元素绑定的节点<子元素绑定的父节；不能阻止冒泡

		//不能阻止冒泡，父元素的selector<子元素的selector
		$('body').on('click','.delete',function(){
			var n = $(this).parent().index();
			alert("删除第几个==" +  n);
			$(this).parent().remove();
			event.stopPropagation();
		});
		$('.ulwrap').on("click",'.item',function(){
			var n = $(this).index();
			alert("li第几个==" + n);
		});

结论：子元素事件中需要添加event.stopPropagation();

1、父节点绑定的父元素大于子元素绑定的父元素，阻止冒泡正常

2、父元素和子元素绑定的父节点为同一个；不能阻止冒泡

3、父元素绑定的节点<子元素绑定的父节；不能阻止冒泡