html

<div style="width:100px;height:100px;border:1px solid #ff0" id="div">div</div>

js

document.on("click",function(e){

if($(e.target).closest("#div").length=0){

$("#div").hide();

}

})

jquery实现点击div外隐藏div的更多相关文章

  1. jquery点击非div区域隐藏div

    点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框

  2. 点击其它地方隐藏div／事件冒泡／sweet－alert阻止冒泡

    点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...

  3. 点击按钮显示隐藏DIV，点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  4. 纯CSS实现点击事件展现隐藏div菜单列表/元素切换

    在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...

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

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

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

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

  7. React 点击按钮显示div与隐藏div，并给div传children

    最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...

  8. 点击自动显示/隐藏DIV代码。(简单实用）

    注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 很多时候我们需要将DIV的信息默认为隐藏状态,只有当用户点击时才显示DIV中包含的提示文字.这类效果在互联网上应用得很多,但实现的方 ...

  9. JQ 点击指定文本框显示div。点击其他区域隐藏DIV

    <input id="username" type="text" style="width:90%;margin-top: 40px;" ...

随机推荐

  1. WeQuant交易策略—5日均线

    简单的价格突破策略.当前价格超过最近5个收盘价的均价,则全仓买入:低于均价,则全仓卖出 代码 # 简单的价格突破策略.当前价格超过最近5个收盘价的均价,则全仓买入:低于均价,则全仓卖出 # PARAM ...

  2. 借助扩展事件查看SQL 2016备份和还原操作的内幕

    当遇到备份或者还原操作占用较长时间时,很多人会问: 备份/还原是不是僵死了?要不要kill掉,再重来? 到底是哪一个部分的操作占用较长时间? 到底现在进行到什么阶段了? 在SQL 2016 之前,要回 ...

  3. Struts2简介以及初步搭建配置

    一.基本介绍 Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与视图的数据交互. ...

  4. Jmeter之接口测试

    最近才入职新公司,好几天没有写博客了,经过一个朋友提醒,刚刚好觉得用Jmeter来做接口测试真的是再好不过了.下面就详细讲解下这两天我利用Jmeter做的接口测试. [安装Jmeter] 详细见博文: ...

  5. maven 搭建 SpringMVC + MyBatis(1)

    ·做了两年多Java Web一多半的项目都是SSM架构的,只搭建过两次,趁着周末做个总结整理. Eclipse搭建Maven项目 1.new project  --> Maven project ...

  6. 使用CefSharp 在C#用户控件中嵌入Chrome浏览器使用方法

    CEF(Chromium Embedded Framework, 嵌入式Chromium框架)是C/C++开发的库 目前 Google Chrome(Google浏览器),Chromium浏览器,Op ...

  7. httpd常用配置

    author:JevonWei 版权声明:原创作品 检查配置文件时,如下提示,则因为没有server的服务名称导致,故设置网站的服务server名称,若没有设置web服务名,主默认解析系统主机名(添加 ...

  8. 使用Composer安装ThinkPHP5

    1.Windows 系统,下载并运行 Composer-Setup.exe. 2.安装compose.PHP采用的是wampserver集成开发环境(这也之后的问题埋下伏笔). 3.然后在命令行下面, ...

  9. 【C# in depth 第三版】温故而知新（1）

    声明 本文欢迎转载,原文地址:http://www.cnblogs.com/DjlNet/p/7192354.html 前言 关于这本书(<深入理解C# 第三版>)的详细情况以及好坏,自行 ...

  10. 教学服务系统设计之PHP后台设计

    项目简介 本项目是与@nameoverflow同学合作.该同学负责vue 前端的设计,我负责php后台的接口实现.本文将主要记录php后台. 本项目的Github地址:https://github.c ...