target和currentTarget
最近做的项目遇到了这样一个问题:
select 标签在实际操作中并不灵活 , 不光是它的样式想要修改很麻烦,用js或者Jquery来控制选中项也是麻烦的
具体体现在通过js操作选中项之前都会清空所有option的selected,不然即便是option已经设置了它的selected为true,但是select依然会选中DOM节点中第一个selected为true的option。技术有限,觉得这样做很麻烦,也出现了很多问题。
最后决定还是决定自己做个下拉框
html如下:
<div class="select_btn">
<span class="select_tap" >农夫山泉</span>
<ul class="select_drop">
<li>怡宝</li>
<li>农夫山泉</li>
<li>营养快线</li>
<li>脉动</li>
</ul>
</div>
css 如下:
* {
padding:0;
margin:0;
}
ul li {
list-style: none;
}
.select_btn {
position: relative;
width: 150px;
height: 22px;
margin-top: 15px;
display: inline-block;
border-radius: 2px;
background-color: #004c5d;
color: deepskyblue;
}
.select_tap {
width:100%;
height: 100%;
text-align: center;
display: inline-block;
color:#fff;
}
.select_drop {
position: absolute;
top: 20px;
left:0px;
z-index: 999;
width:150px;
text-align: center;
border-radius: 2px;
background-color: #006076;
color:#fff;
}
.select_drop li {
cursor: pointer;
}
.select_drop li:hover {
background-color: #fff;
color: #000;
border-radius: 2px;
}
JS代码:
$(".select_btn").hover(function(e) {
/* 鼠标悬浮事件 */
console.log(e);
if ( !$(this).is(":animated") ){
$(e.target).find("ul").slideDown(150);
}
}, function(e) {
/* 鼠标离开事件 */
if ( !$(this).is(":animated") ){
$(e.target).find("ul").slideUp(150);
}
});
代码不是很规范,刚学不久。
用JQuery初始化”.select_drop”的display为none,再通过”.select_btn”的mouseoer事件触发,让下拉框显示出来 。
但是这里就会出现一个问题:
不管鼠标在上面怎么移动都无法显示“.select_drop”。
在检查了js代码和CSS ,有如下2种解决办法:
- JS
其实这个问题是由于对触发事件接收的Event对象理解不透彻造成的。
打印一下这个接收的事件
就可以发现这个Event对象有除了有一个target属性,还有一个currentTarget属性
那target和currentTarget有什么区别呢 ?
比如说你让body监听鼠标点击事件,
在body里加一个有宽高的div,
这时你点击这个div。target就是div,currentTarget就是body。
一言以蔽之,currentTarget是事件的监听者,而target是事件的真正发起者
target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(一般为父级)。
原文出自这里,里面用了几个例子表现了target和currentTarget的区别。
所以我们只需要把js代码中的target改成currentTarget就可以解决问题
- CSS
既然知道了target和currentTarget的区别,那我们让事件流处在目标阶段,两个的指向就可以一样
具体实现如下:
在chorme下查看元素发现”.select_tap”把“.select_btn”全部遮挡住了 ,这种情况下 “.select_tap”就会成为事件的真正发起者
接下来我就给“.select_btn”增加了1px的padding,同时设置box-sizing为 border-box;
这个时候就可以正常显示下拉框,将target和currentTarget的指向一致。
要点:
js事件流的理解
jquery的Event对象