jquery如何实现点菜单或者菜单里面的对象不隐藏，点菜单外面隐藏

最新推荐文章于 2022-07-26 14:21:43 发布

王奕然

最新推荐文章于 2022-07-26 14:21:43 发布

阅读量785

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/wangyuxuan_java/article/details/9004873

版权

jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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 >Event Object

event.targetReturns:Element

Description: The DOM element that initiated the event.

version added: 1.0event.target

The target property can be the element that registered for the event or a descendant of it. It is often useful to compareevent.target tothis in 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 ] )
- selector
  
  Type: 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/

王奕然

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery如何实现点菜单或者菜单里面的对象不隐藏，点菜单外面隐藏

Insert title here .f{}$(document).ready(function(){ $("html").click(function(event){ alert($(event.target).attr("id")); alert($(event.target).parents().each(function(){ a
复制链接

扫一扫