jQuery实现鼠标点击Div区域外隐藏Div

摘录自:http://www.crackedzone.com/jquery-click-div-outside-hide-div.html

jQuery本身没有这样一个事件,要实现这个效果,我们首先要先了解javascript中的事件冒泡。

冒泡定义:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。(摘自网络)

1. 阻止事件冒泡, 并不阻止事件行为:event.stopPropagation();

2. 阻止事件行为,并不阻止事件冒泡 :event.preventDefault();

3. 阻止事件冒泡, 也阻止事件行为:return false;

实例:

$("#btn").click(function (event) {
	$("#demo").fadeIn();
	$(document).one("click", function () {//对document绑定一个影藏Div方法
		$("#demo").hide();
	});
	event.stopPropagation();//点击Button阻止事件冒泡到document
});
$("#demo").click(function (event) {
	event.stopPropagation();//在Div区域内的点击事件阻止冒泡到document
}); 
时间: 2025-01-12 18:29:38

jQuery实现鼠标点击Div区域外隐藏Div的相关文章

js实现的点击div区域外隐藏div区域(转)

首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡: 1.stopPropagation()对于非IE浏览器. 2.cancelBubble属性为true,对于IE浏览器,而Jquery已经有兼容浏览器的方法,event.stopImmediatePropagation(); <!DOCTYPE html> <html> <head&g

使用JS或jQuery模拟鼠标点击a标签事件代码

原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" href="abc.aspx" style="visibility: hidden;">下一步</a> $("#alink").click(); // 触发了a标签的点击事件,但是没有触发页面跳转 document.getEleme

jquery 实现鼠标点击div盒子移动功能

// Start 窗口的拖动 var _move=false; //移动标记 var _x,_y; //鼠标离控件左上角的相对位置 $(document).ready(function(){ $(".box h4").click(function(){ // alert("click");//点击(松开后触发) }).mousedown(function(e){ var _this = $(".box"); if(!_move){ _move=t

使用jQuery模拟鼠标点击a标签事件

来源于:https://mo2g.com/view/42/ <html> <head> <meta charset="UTF-8"> <title>磨途歌-A标签测试3</title> </head> <body> <a href="http://www.mo2g.com">磨途歌</a> </body> </html> <scr

点击区域外隐藏该区域,event.stopPropagation()

event.stopPropagation() Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. 点击区域外隐藏该区域Example: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta content="chars

点击页面其它地方隐藏div所想到的jQuery的delegate

在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始,假如页面有一个id为test的div,我们要实现点击页面其它地方隐藏该div: <div id="test" style="margin:100px;background-color:#3e3;width:100px;height:100px;"> <

delphi7 怎么让button按钮跟着鼠标点击dbgrideh数据行移动

delphi7 怎么让button按钮跟着鼠标点击dbgrideh数据行移动 在 dbgrid的DBGridCellClick 事件中加上: Delphi/Pascal code 1 2 3 4 5 6 7 8 9 10 11 var   x, y : integer ;   P: TPoint; begin   GetCursorPos(P);   Edit1.Text := Format('X: %d, Y: %d',[P.X, P.Y]);   x := frMainTest.Left ;

sendmessage()模拟鼠标点击

{鼠标软模拟:好处就是不会真的移动鼠标 开始按钮 坐标 x=386y=387 }sendmessage(hookHwnd,messages.WM_LBUTTONDOWN ,0,$0180017A); {按下鼠标左键}sendmessage(hookHwnd,messages.WM_LBUTTONUP ,0, $0180017A); {抬起鼠标左键}{硬件模拟:会真的移动鼠标}mouse_event(MOUSEEVENTF_LEFTDOWN,X ,Y ,0,0);mouse_event(MOUSE

鼠标点击input时,placeholder中的提示信息消失

html代码: <input type="text" placeholder="请输入"> 鼠标点击input时,placeholder中的提示信息消失: <input type="text" placeholder="请输入" onfocus="this.placeholder=‘‘" onblur="this.placeholder=‘请输入‘">