事件冒泡的一些应用_利用事件冒泡处理多个事件[1]

最新推荐文章于 2023-03-25 22:55:55 发布

weixin_30344995

最新推荐文章于 2023-03-25 22:55:55 发布

阅读量104

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yunxianli/p/4111954.html

版权

在做项目时，有这样一个需求，需要点击Input显示隐藏下拉面板，从中选择内容填充入文本框。

最开始思路：

（1）文本框与下拉面板作为一个整体，整体失去焦点后，隐藏下拉面板，不可行；

（2）文本框正拥有焦点，此时点击面板，尝试先触发面板的点击事件再通过文本框的失去焦点事件

以上思路最终均不可行，原因：

（1）div没有获取焦点之说，何来失去焦点；

（2）文本框触发焦点事件总是会先执行，面板隐藏后无法再触发其点击事件；

最后解决思路：利用冒泡机制，将点击事件绑定在父容器中，如果有点击事件，判断target如果不是文本框并且不是下拉面板，则隐藏下拉面板（有点排除法意味）；

demo在线演示：http://sandbox.runjs.cn/show/adgslqc2

源码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
  <link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/294/c4c2o6mh/base.css">
	<style>
		.main{width: 400px;height: 400px;background-color: #F0F8FF;}
		.item{width: 153px;height: 100px;background-color: #B9D3EE;position:absolute;left: 60px;}
	</style>
</head>
<body>
	<div class="main fn-re" id="t">
		选择类别：<input id="t-1" type="text" />
		<div id="t-2" class="item fn-hide"></div>
	</div>

	<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/294/c4c2o6mh/jquery.js"></script>
	<script>
		var main = $('.main'),
			input = $('input'),
			item = $('.item');
		input.focus(function(){
			item.css('display','block');
		});
		//开始想使用blur事件来处理，不好用
		main.click(function(ev){
			var id = ev.target.id;
			if(id!='t-1'&&id!='t-2')
				$('.item').hide();
		});
	</script>
</body>
</html>

写的过程新发现：下面代码如果将target换成this,则会出现一些问题。打印之发现：this取得是整个父节点，而target获取的是点击时候的子节点

main.click(function(ev){
			var id = ev.target.id;
			if(id!='t-1'&&id!='t-2')
				$('.item').hide();
		});

转载于:https://www.cnblogs.com/yunxianli/p/4111954.html

weixin_30344995

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件冒泡的一些应用_利用事件冒泡处理多个事件[1]

在做项目时，有这样一个需求，需要点击Input显示隐藏下拉面板，从中选择内容填充入文本框。最开始思路：（1）文本框与下拉面板作为一个整体，整体失去焦点后，隐藏下拉面板，不可行；（2）文本框正拥有焦点，此时点击面板，尝试先触发面板的点击事件再通过文本框的失去焦点事件以上思路最终均不可行，原因：（1）div没有获取焦点之说，何来失去焦点；（2）文本框触发焦点事件总是会先...
复制链接

扫一扫