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

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

$(function() {
$("#link").click(function(event) {
event.stopPropagation();
});
});

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

$(function() {
$("#link").click(function(event) {
event.preventDefault();
});
});

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

$(function() {
$("#link").click(function(event) {
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
});
 

例子:

 
<p><a href="javascript:void(0)" class="a">菜单按钮</a></p>
<div class="menu">
<a href="http://www.baidu.com">百度</a>
</div> $(".a").on("click", function(e){
if($(".menu").is(":hidden")){
$(".menu").show();
}else{
$(".menu").hide();
} $(document).one("click", function(){
$(".menu").hide();
}); e.stopPropagation();
});
$(".menu").on("click", function(e){
e.stopPropagation();
});

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

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

    首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡: 1. ...

  2. js实现的点击div区域外隐藏div区域

    首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡:1.对 ...

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

    原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" ...

  4. jQuery实现鼠标点击div外的地方div隐藏消失的效果(转)

    转:https://www.cnblogs.com/jsingleegg/p/3456152.html css部分: <style type="text/css">.p ...

  5. jQuery实现鼠标点击div外的地方div隐藏消失的效果

    css部分: <style type="text/css"> .pop { width:200px; height:130px; background:#080;} & ...

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

    // Start 窗口的拖动 var _move=false; //移动标记 var _x,_y; //鼠标离控件左上角的相对位置 $(document).ready(function(){ $(&q ...

  7. 使用JS或jQuery模拟鼠标点击a标签事件

    <a id="alink" href="abc.aspx"  style="visibility: hidden;">下一步&l ...

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

    来源于:https://mo2g.com/view/42/ <html> <head> <meta charset="UTF-8"> <t ...

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

    event.stopPropagation() Description: Prevents the event from bubbling up the DOM tree, preventing an ...

随机推荐

  1. Egret的一些性能优化

    Egret的性能优化不知道在哪里啊,主要参考Laya的性能优化,都差不多 一.性能统计面板 index.html页面设置data-show-fps=true打开性能面板 性能统计面板说明 Egret没 ...

  2. c# 执行 CreateHandle() 时无法调用值 Dispose()

    在多线程C#开发中,遇到错误 执行 CreateHandle() 时无法调用值 Dispose().,这个错误是在关闭窗体的时候出来的. 原因是因为窗体还存在CreateHandle()事件,所以还不 ...

  3. Mac/Xcode - 开发技巧快捷键

    Xcode是iPhone和iPad开发者用来编码或者开发iOS app的IDE.Xcode有很多小巧但很有用的功能,很多时候我们可能没有注意到它们,也或者我们没有在合适的水平使用这些功能简化我们的iO ...

  4. CHECKSUM比较两表字段值差异

    CHECKSUM 返回在表的行上或在表达式列表上计算的校验值.CHECKSUM 用于生成哈希索引. 语法 CHECKSUM ( * | expression [ ,...n ] ) 参数 * 指定在表 ...

  5. CentOS中为新用户添加sudo权限

    1.切换成root权限 su root 2.查看/etc/sudoers文件权限,如果只读权限,修改为可写权限 ls -l /etc/sudoers 3.如果是只读进行如下操作 chmod /etc/ ...

  6. python重定向sys.stdin、sys.stdout和sys.stderr

    转自:https://www.cnblogs.com/guyuyuan/p/6885448.html 标准输入.标准输出和错误输出. 标准输入:一般是键盘.stdin对象为解释器提供输入字符流,一般使 ...

  7. inotify+rsync安装配置

    环境 系统 IP地址 主服务器 CentOS7.4 192.168.1.1 备份服务器 CentOS7.4 192.168.1.2 一.备份服务器 安装rsync(备) wget https://rs ...

  8. Python开发【前端】:Ajax(一)

    Ajax Ajax即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,AJAX = 异步 JavaScr ...

  9. CF734F Anton and School 构造+数论

    正解:构造 解题报告: 先放下传送门QwQ 这题首先要知道一个结论:(x&y)+(x|y)=x+y 还是能理解的趴? 所以我们把bi+ci就能得到∑a+n*a[i] 然后我们就能成功求出∑a ...

  10. mysql参数安全设置

    MySQL安全相关的参数有哪些?该如何配置? 1.MySQL数据安全 innodb_flush_log_at_trx_commit =1 #innodb每次提交事务redo buffer 刷新到red ...