冒泡定义:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到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. [HNOI2004] 打砖块

    1292. [HNOI2004] 打砖块 ★★   输入文件:brike.in   输出文件:brike.out   简单对比时间限制:1 s   内存限制:128 MB [题目描述] 在一个凹槽中放 ...

  2. 不同linux下两网卡绑定方法

    记得原来在做性能测试时,为了提高网络吞吐率.必须将两个网卡绑定一起工作.绑定方法如下: 一.CentOS 配置   1.编辑虚拟网络接口配置文件,指定网卡IP: # vi /etc/sysconfig ...

  3. Android DatepickerDialog(日期选择器)的使用

    效果图如下: 日期和时间选择对话框,首先是要获得当前时间,这里用 java类中的Calendar来获得日期和时间(也可以用Date,但是不提倡,Date部分方法已经注释为过时), Calendar是一 ...

  4. svn-maven-tomcat自动发布脚本

    #!/bin/sh #svn-maven-tomcat自动发布脚本 #变量设置 svnpath=svn://10.60.10.120/研发部/xx-maven svnusername=xxx svnp ...

  5. Visual Studio 2015 Enterprise - 企业版 - 简体中文

    文件名称 文件大小 百度网盘下载 微软官方下载 Visual Studio 2015 Enterprise - 企业版 - 简体中文 3.89GB http://pan.baidu.com/s/1bn ...

  6. 【ES6】001---module模块------【巷子】

    001.前言 什么是模块化开发?   为了提高代码的复用度,开发人员会按照功能把大量的js代码分成若干文件,这样在多个页面就可以使用同一个文件了.,下面是某个网站的js引用情况 怎么会有这么多js文件 ...

  7. javascript飞机大战-----002游戏引擎

    基本html布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. 【转载】排查Linux机器是否已经被入侵

          背景信息:以下情况是在CentOS 6.9的系统中查看的,其它Linux发行版类似 1.入侵者可能会删除机器的日志信息,可以查看日志信息是否还存在或者是否被清空,相关命令示例: [root ...

  9. 转!!CMPP 网关错误码说明

    http://www.163duanxin.com/msg/1753.htm CMPP错误码说明   与中国移动代码的对应关系. MI::zzzzSMSC返回状态报告的状态值为EXPIREDMJ:zz ...

  10. 存储5——逻辑卷管理LVM

    1. LVM概念 LVM是 Logical Volume Manager(逻辑卷管理)的简写,它由Heinz Mauelshagen在Linux 2.4内核上实现.LVM将一个或多个硬盘的分区在逻辑上 ...