<body style="text-align:center;">
  <input type="text" style="width:200px;height:30px;background:pink;margin-top:100px auto 0;">
  <div style="width:300px;height:300px;background:red;margin:0 auto;display:none;"></div>
<script>
var input=document.getElementsByTagName('input')[0];
var div=document.getElementsByTagName('div')[0];
//第一种写法
input.addEventListener('click',function(event){
   event=event||window.event;
   div.style.display="block";
  event.stopPropagation();
})
 document.addEventListener('click',function(event){
   event=event||window.event;
   div.style.display="none";
  event.stopPropagation();
})
 div.addEventListener('click',function(event){
  event=event||window.event;
  div.style.display="block";
  event.stopPropagation();
 })

第二种写法

document.onclick=function(event){
  event=event||window.event;
  div.style.display="none";
  event.stopPropagation();
}
input.onclick=function(event){
  event=event||window.event;
  div.style.display="block";
  event.stopPropagation();
}
div.onclick=function(event){
  event=event||window.event;
  div.style.display="block";
  event.stopPropagation();
}
//阻止冒泡的兼容写法
function stopEvent(event){
  var e=arguments.callee.caller.arguments[0] || event;//这里是因为除了IE有event其他浏览器没有所以要做兼容
  if(window.event){ //这是IE浏览器
    e.cancelBubble=true;//阻止冒泡事件
    e.returnValue=false;//阻止默认事件
  }else if(e && e.stopPropagation){ //这是其他浏览器
    e.stopPropagation();//阻止冒泡事件
    e.preventDefault();//阻止默认事件
  }
}
</script>
</body>

js实现点击div以外区域,隐藏div区域的更多相关文章

  1. JS 实现点击页面任意位置隐藏div、span

    通过调用下面的 showhidden(“标签ID”) 显示div/span/…等标签内容,可以实现点击页面任意地方再次隐藏该标签内容,而showhidden(“标签ID”,”nohidden”)可保存 ...

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

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

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

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

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

    在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...

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

    对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件 ...

  6. Js-Html 前端系列--点击非Div区域隐藏Div

    最近做项目要用到三字码下拉,调用一个插件,但是滚动条不能点击. 后来看另一个插件后突发奇想,在点击其他区域的时候隐藏这个Div就可以了. 背景:输入文字,弹出下拉Div,点击或者拉动Div滚动条选择, ...

  7. 原生JS实现点击一个按钮显示一个div,再点击按钮div隐藏,或点击除div外其它空白处div隐藏

    <!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...

  8. 点击页面任何位置隐藏div

    <include file="Public:header" /> <style type="text/css"> table{width ...

  9. IOS中div contenteditable=true无法输入 fastclick.js在点击一个可输入的div时,ios无法正常唤起输入法键盘

    原文地址: https://blog.csdn.net/u010377383/article/details/79838562 前言 为了提升移动端click的响应速度,使用了fastclick.js ...

  10. jquery点击按钮显示和隐藏DIv

    function changeDisplay() { if ($("#btnShow").attr("value")== "添加附件") { ...

随机推荐

  1. Splash images_enabled 属性

    images_enabled属性用于设置加载页面时是否加载图片,如下,禁止之后,返回的页面截图就不会带有任何图片,加载速度也会快很多 function main(splash, args) splas ...

  2. 两台Linux主机互传文件可以使用SCP命令来实现

    当两台linux主机之间要互传文件时可使用SCP命令来实现 复制文件: (1)将本地文件拷贝到远程 scp 文件名 --用户名@计算机IP或者计算机名称:远程路径 (2)从远程将文件拷回本地 scp ...

  3. Netty《一》

    作者:郭无心链接:https://www.zhihu.com/question/24322387/answer/78947405来源:知乎著作权归作者所有,转载请联系作者获得授权. Netty是什么? ...

  4. 清理和关闭多余的Windows 7系统服务

    清理和关闭多余的Windows 7系统服务 现在已经有不少配置不是很高的电脑用户正式用上了Windows 7(以下简称Win 7),如何让低配置电脑可以更流畅的运行Win 7呢?虽然部分软件提供了傻瓜 ...

  5. 【Linux基础】Linux基础命令行学习笔记

    绝对路径:cd /home/python相对路径:cd Downloads . 表示:当前那路径..表示:当前路径的上一层../.. 表示:当前路径的上二层 没有...或者以上的 ls: ls 查看当 ...

  6. java基础---->java注解的使用(一)

    注解是众多引入到Java SE5中的重要的语言变化之一.它为我们在代码中添加信息提供了一种形式化的方法,使我们可以在稍后某个时刻非常方便的使用这些数据.今天我们就开始学习一下java中注解的知识. j ...

  7. Makefile 中all 和.PHONY的作用

    请编写一个makefile同时编译.链接下面两个程序: main1.c: #include<stdio.h> int main(void) { printf("main1\n&q ...

  8. Gym 101915G Robots

    G. Robots time limit per test 5.0 s memory limit per test 256 MB input standard input output standar ...

  9. Unity3D Animator控制参数和添加事件

    Animator控制参数和添加事件 using UnityEngine; using System.Collections; public class AniControl : MonoBehavio ...

  10. Unity3D 加密 Assembly-CSharp.dll (Android平台) 防止反编译【转】

    转自 http://blog.csdn.net/u013108312/article/details/54234439