冒泡定义:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到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. Lucene中最简单的索引和搜索示例

    package com.jiaoyiping.lucene; import org.apache.lucene.analysis.standard.StandardAnalyzer; import o ...

  2. Egret打包App Android热更新(4.1.0)

    官网教程:http://developer.egret.com/cn/github/egret-docs/Native/native/hotUpdate/index.html 详细可看官网教程,我这里 ...

  3. tpcc-mysql安装、使用、结果解读

    请点击:http://www.aikaiyuan.com/8687.html 错误处理: ln -s /usr/local/mysql/lib/libmysqlclient.so. /usr/lib6 ...

  4. Spring应用配置文件上传的两种方案

    欢迎查看Java开发之上帝之眼系列教程,如果您正在为Java后端庞大的体系所困扰,如果您正在为各种繁出不穷的技术和各种框架所迷茫,那么本系列文章将带您窥探Java庞大的体系.本系列教程希望您能站在上帝 ...

  5. 05StuList.aspx(学生列表)

    05StuList.aspx  加载学生列表(前天代码) <%@ Page Language="C#" AutoEventWireup="true" Co ...

  6. android.os.Handler

    android.os.handler A Handler allows you to send and process Message and Runnable objects associated ...

  7. Django - 项目总结

    总结: 基础,进阶,项目 Django - 练习(图书管理系统) 前后端分离得项目: vue + rest framework 项目: 图书增删改查页面 BBS + BLOG系统 CRM系统   在线 ...

  8. 【Maven学习】Nexus私服代理其他第三方的Maven仓库

    一.背景 [Maven学习]Nexus OSS私服仓库的安装和配置 http://blog.csdn.net/ouyang_peng/article/details/78793038 [Maven学习 ...

  9. centos7 安装Mariadb

    MariaDB 数据库管理系统是 MySQL 的一个分支,主要由开源社区在维护,采用 GPL 授权许可.开发这个分支的原因之一是:甲骨文公司收购了 MySQL 后,有将 MySQL 闭源的潜在风险,因 ...

  10. sql server 驱动程序在 \Device\RaidPort0 上检测到控制器错误。

    sql server 驱动程序在 \Device\RaidPort0 上检测到控制器错误. 错误情况,如下图: 原因分析:硬盘故障 解决办法:进行迁移