document.documentElement & e.srcElement &e.target

点击事件与jQuery的结合应用

最新推荐文章于 2020-12-18 10:01:45 发布

原创最新推荐文章于 2020-12-18 10:01:45 发布 · 249 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

Javascript 专栏收录该内容

33 篇文章

订阅专栏

本文通过一个实例展示了如何使用jQuery实现元素点击事件的基本功能，包括事件绑定、事件触发条件判断以及事件处理逻辑。



$(document.documentElement).bind("click",function(e){
			var e = e||window.event;
			var o = e.srcElement?e.srcElement:e.target
			if(o){
				alert(o.tagName);
			}
		});

一个小例子


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
  <style type="text/css">
		#mesg{
			width:152px;
			height:120px;
			background:#ECEEFE;
			border:1px solid #CED3FC;
			display:none;
			position:absolute;
		}
		.btn{
			cursor:pointer;
		}
  </style>
  <script type="text/javascript">
  <!--

	var m = {};
	$(function(){
		m={c:1,show:false,to:null,mesg:$("#mesg")[0]};
		$(document.documentElement).bind("click",function(e){
			if(m.show && m.c >=2){
				var e = e||window.event;
				var o = e.srcElement?e.srcElement:e.target;
				if(o != m.to[0] && o !=m.mesg){
					m.show=false;
					$(m.mesg).hide();
				}
			}
			m.c++;		
		});

		$(".btn").bind("click",function(){
			if(m.show){
				m.show=false;
				$(m.mesg).hide();
			}else{
				var mg = $("#mesg");
				var to = $(this).prev();
				var of = to.offset();
				mg.css({"left":of.left,"top":of.top+20}).show();
				m.show=true;
				m.to=to;
				m.c=1;
			}		
		});		 
	});
  //-->
  </script>
 </head>
 <body>
	<input id="t1"/><image src="qq.jpg" class="btn" >
	<input /><image src="qq.jpg" class="btn" >
	<br/>
	<br/>
	<br/>
	<br/>
	<input /><image src="qq.jpg" class="btn">
	<div id="mesg"></div>
 </body>
</html>