jquery如何实现点菜单或者菜单里面的对象不隐藏,点菜单外面隐藏
2013-06-01 18:37
375 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html id="a1"> <head> <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> .f{} </style> </head> <body id="a2"> <script type="text/javascript"> $(document).ready(function(){ $("html").click(function(event){ alert($(event.target).attr("id")); alert($(event.target).parents().each(function(){ alert($(this).attr("id"));})); if(!$(event.target).is("#a4") && !$(event.target).parents("#a4").is("#a4")){ alert(event.target.nodeName); } }); }); </script> <div id="a3" class="f"> cccc <div id="a4" class="f">aaa <p id="a5">bbb</p> </div> </div> </body> </html>
event.target
Categories: Events >EventObject
event.targetReturns:Element
Description: The DOM element that initiated the event.version added:
1.0event.target
The targetproperty can be the element that registered for the event or a descendant of it. It is often useful to compare
event.targetto
thisin order to determine if the event is being
handled due to event bubbling. This property is very useful in event delegation, when events bubble.
注意target可能是注册了事件的element或者是他的后代。你可以用
alert($(event.target).attr("id"));体会,所以不能光用
!$(event.target).is("#a4")判断,还需要
!$(event.target).parents("#a4").is("#a4")判断,因为不一定is("#a4"),还可能是他的 a descendant of it
.parents( [selector ] )Returns:jQuery
Description: Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.version added:
1.0.parents( [selector ] )
selectorType: Selector
A string containing a selector expression to match elements against.
Given a jQuery object that represents a set of DOM elements, the
.parents()method allows us to search through the ancestors of these elements in the DOM tree and construct a new jQuery object from the matching elements
ordered from immediate parent on up; the elements are returned in order from the closest parent to the outer ones.When multiple DOM elements are in the original set, the resulting set will be inreverse order of the original elements as well,
with duplicates removed.
.parents()方法会搜遍这些elements 在DOM树里的祖先,并构建一个新的jquery对象从匹配的elements里,从最近的父element向上,这些对象是被返回的按照最近的父element到更外面的。你可以用
alert($(event.target).parents().each(function(){ alert($(this).attr("id"));}));来体会。
参照:http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element?page=1&tab=oldest#tab-top
http://api.jquery.com/parents/
http://api.jquery.com/event.target/
相关文章推荐
- JavaScript中如何将html字符串转化为Jquery对象或者Dom对象
- 借用鼠标指定的对象实现动态显示和隐藏菜单
- 在jquery 1.11.1版本中,如何实现jquery 1.9以下版本里面的toggle功能?
- jQuery 实现点击页面其他地方隐藏菜单
- JS +XML +Jquery 实现三级联动菜单,自己封装的一个对象方便使用
- 浅谈javascript对象、如何实现继承、jQuery方法的扩展(jquery插件)
- 如何使用jQuery-ContextMenu实现右击菜单
- jquery实现的固定位置下拉隐藏上拉显示悬浮导航菜单特效
- jQuery实现菜单点击隐藏(上下左右)
- jQuery实现菜单的显示和隐藏功能示例
- jquery实现菜单功能(单击展开或者关闭)-一般应用于后台
- jQuery如何实现点击下拉菜单的隐藏和显示
- JavaScript中如何将html字符串转化为Jquery对象或者Dom对象
- jquery创建并行对象或者合并对象的实现代码
- jQuery实现菜单的隐藏和显示
- jquery创建并行对象或者合并对象的实现代码
- jQuery实现 div里面的文字如何自动缩小,避免文字溢出
- Android基于mAppWidget实现手绘地图(十三)–如何显示/隐藏任意类型的地图对象
- jquery实现点击本页面非本小窗口(菜单)元素时,隐藏小窗口(适合页面中存在多个小提示窗口、菜单)
- jQuery 怎么实现点击页面其他地方隐藏菜单? 做了个按钮点击时弹出菜单,想实现点击其他地方时隐藏弹出的菜单