前端写脚本绑定某事件已经司空见惯了,突然有个需求需要点击某个元素之外触发一些动作呢?比如,写一个模拟的select下拉,一般都是点击下拉,弹出下拉选项,再点击下拉的某个选项,下拉收起。如果用户点击下拉,然后就不想点下拉选项了,这时用户点击这个下拉之外的任何东西,这个下拉都应该收起。
jq如何实现这个功能呢?其实也不难,大概思路就是,在document上面绑定一个事件,当用户触发document的事件时,判断一下目标元素是什么,然后再执行相应的操作就行了。
CODE:
<script>
$(function(){
$(document).bind("click",function(e){
//id为menu的是菜单,id为open的是打开菜单的按钮
if($(e.target).closest("#menu").length == 0 && $(e.target).closest("#open").length == 0){
//点击id为menu之外且id不是不是open,则触发
close();
}
})
})
function close(){
//close menu...
}
function open(){
//open menu...
}
</script>
closest() 方法
定义和用法
closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。
语法
.closest(selector)
参数 | 描述 |
---|---|
selector | 字符串值,包含匹配元素的选择器表达式。 |
如果给定表示 DOM 元素集合的 jQuery 对象,.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素,并用匹配元素构造新的 jQuery 对象。