原生js实现点击目标区域外侧触发事件

HSdiana 2020-06-03

有时候由于需要实现点击出现下拉框，而点击空白处或除了目标区域之外而响应事件使得弹框消失，此文则与各位分享如何使用原生js实现该需求
整个html文件献上（已封装）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
<script>
	//封装
    function clickoutSide(nameClass,callback){
        // 全局注册点击事件
        document.onclick = function(e){
            //若点击元素为目标元素则返回
            if(e.target.className===nameClass) return  
            //否则执行回调函数
            callback()
    	}
    }
    clickoutSide(‘box‘,function(){
        console.log(‘点击了外部‘);

    })
</script>
</html>
HSdiana

HSdiana

相关推荐

Java学习（十二）

今天安装讲师推荐下载了一个叫Hbuiler X的IDE，并且学习了选择器的知识。选择器1选择器2{}//同时满足2个选择器条件的才会使用大括号内的样式也可以选中全页面统一样式。static{}中的代码叫做静态代码块，在类加载时执行，且只执行一次，从上而下的

opspider / 0评论 2020-06-28

Python爬虫 - scrapy

start_requests:可以将遍历start_urls列表，将每一个列表元素进行get请求的发送。def file_path:指定文件路径。# Don‘t forget to add your pipeline to the ITEM_PIPELIN

ZHANGRENXIANG00 / 0评论 2020-06-28

HTML中添加meta元数据内容

HTML中添加meta元数据内容

hitxueliang / 0评论 2020-06-14

django模型中的meta选项整理

django模型中使用Meta类表示模型的元数据，所谓元数据即是除了字段意外的数据。用于对查询结果对象排序；ordering的值可以是一个元组/列表，或者查询表达式，其中每一个字符串是模型中的一个字段，默认是升序排列，字段前面加上‘-‘表示降序排列，如果是

明瞳 / 0评论 2020-06-10

css改变svg的颜色

<!DOCTYPE html>. <meta name="viewport" content="width=device-width, initial-scale=1.0">. <met

lanzhusiyu / 0评论 2020-06-09

【Django学习】Django model中的class Meta详解

比如你在其他地方写了一个模型类，而这个模型类是属于myapp的，那么你这是需要指定为：。Django有一套默认的按照一定规则生成数据模型对应的数据库表名，如果你想使用自定义的表名，就通过这个属性指定，比如：。由于Django的管理方法中有个lastest(

PengQ / 0评论 2020-05-26

没有最全只有更全的关闭浏览器缓存的&lt;meta&gt;标签

meta是html语言head区的一个辅助性标签。类似地height指令使用device-height标记指示视区高度为设备的屏幕高度。与initial-scale相同，这些指令的值是应用于视区内容的缩放比例。E、Window-target说明：强制页面在

lengyu0 / 0评论 2020-05-20

50.前端学习02——HTML

超文本标记语言是一种用于创建网页的标记语言。本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。--左侧菜单栏结束-->. DOCTYPE html>声明为HTML5文

HSdiana / 0评论 2020-05-11

【Spring Boot】Spring Boot之整合Apollo配置中心

# 使Apollo的加载顺序放到日志系统加载之前，不过这会导致Apollo的启动过程无法通过日志的方式输出。# 建议在实际使用时尽量给出默认值，以免由于key没有定义导致运行时错误。

haidaoxianzi / 0评论 2020-04-18

html页面引用video.js播放m3u8格式视频

//只粘贴了不分代码，都是主要的,只要视频没问题，如果不能播放，建议换一个视频源，代码绝对没问题 都可以播放，下面video样式那里，一共三层，<div class="shipin"> <video id=&q

PioneerFan / 0评论 2020-04-09

div 内容垂直居中

<div style="width: 200px;height: 200px;border: solid red 1px;display: flex;align-items: center;">

HSdiana / 0评论 2020-03-28

Django-基础 Meta自定义

Django模型类的Meta是一个内部类，它用于定义一些Django模型类的行为特性。而可用的选项大致包含以下几类。abstract这个属性是定义当前的模型是不是一个抽象类。db_tabledb_table是指定自定义数据库表明的。Django有一套默认的

百年da孤独 / 0评论 2020-03-27

Hbase架构原理解析

HBase 的架构似乎也是 master-slave 架构，和 HDFS 有点像，HMaster 是用来管理集群，HRegionServer 是真正存储数据的地方。HBase 在数据查询和写入的时候，其实并不是像 HDFS 那样询问 HMaster。在 H

lwb / 0评论 2020-03-26

应用缓存

NETWORK:可以使用星号来指示所有其他资源/文件都需要因特网连接：NETWORK 小节规定文件 "login.php" 永远不会被缓存，且离线时是不可用的：。FALLBACK: FALLBACK 小节规定如果无法建立因特网连接，则用

haocxy / 0评论 2020-03-08

PHP页面中文乱码处理办法

出现乱码问题的原因，一般都是页面的中文字符的编码格式与浏览器编码格式不符。下面我们来看看处理这类问题的方法：。下面我们来看下这两者的区别。使用 <META http-equiv="content-type" content=&qu

spinachcqb / 0评论 2020-03-06

网站元数据meta标签

Meta标签是HTML语言中HEAD区的一个辅助性标签，它位于HTML文档头部的<head>标记 和<title>标记之间，它提供用户不可见的信息。META标签有两个重要的属性：HTTP标题信息和页面描述信息。name属性是描述网页

柳永法的个人 / 0评论 2020-02-13

HTML

<h1>这是个栗子，快尼玛给我运行起来。<meta name="keywords" content="北京，天津，大连，广东，xxxxx" />. meta标签可以设置网站描述信息，用于在搜索

qsdnet我想学编程 / 0评论 2020-01-29

web前端入门到实战：Html头部meta标签

meta元素有4个属性：name、http-equiv、content、charset.meta标签通过name属性来表述页面文档的元信息，通过http-equiv属性设置http请求指令，通过charset设置页面的字符编码。按照属性设置分类，meta可

wwwxuewen / 0评论 2020-01-19

node --express处理get和post

创建public文件夹放入html文件

swiftwwj / 0评论 2019-12-28

THML知识点复习

HTML超文本标记语言，是学习Web程序的最重要并且最基础部分。html语言由浏览器可以自动进行解释。最新版本为HTML5.0，常用版本为xhtml1.0，由浏览器解释执行，纯文本文件。xhtmlxhtml1.0是HTML4.01的升级版本，比HTML更加

爱好HtmlCssJs / 0评论 2019-12-26

最后执行finally

console.log;//catch()捕获error name=b，b容纳了throw定义的error massage. console.log;//不论前面怎样，最后都要执行的代码

行吟阁 / 0评论 2019-12-14

html5-meta标签和搜索引擎

<meta http-equiv="X-UA-Compatible" content="ie=edge" /> //浏览器兼容。<meta name="description"

yanweiqi / 0评论 2019-12-12

Qt元对象(Meta-Object)系统与反射

-在计算机科学中，反射是指计算机程序在运行时可以访问、检测和修改它本身状态或行为的一种能力。要注意术语“反射”和“内省”的关系。C++的标准语法是不提供反射的特性的，不过随着C++17的定稿，估计这个关键词不会加到标准中了。Qt最大的特点就是增加了moc的

zuihaobushi / 0评论 2019-12-04

php 实现简单的登录功能示例【基于thinkPHP框架】

本文实例讲述了php 实现简单的登录功能。分享给大家供大家参考，具体如下：。更多关于thinkPHP相关内容感兴趣的读者可查看本站专题：《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigni

左转有出口 / 0评论 2019-12-02

CSS样式继承性

外层元素身上的样式会被内层元素所继承。并不是所有的样式都能够继承，只有文本与字体样式属性才能够被继承，其余的样式属性不可以被继承。

somboy / 0评论 2019-12-01

重学前端学习笔记（十六）--HTML元信息类标签

元信息，是指描述自身的信息。元信息类标签，就是 HTML 用于描述文档自身的一类标签。作为盛放其它语义类标签的容器使用。base 标签作用是给页面上所有的 URL 相对地址提供一个基础。meta 标签是一组键值对，它是一种通用的元信息表示标签。建议放在 h

WebVincent / 0评论 2019-11-19

Django模型之Meta选项详解

Django模型类的Meta是一个内部类，它用于定义一些Django模型类的行为特性。而可用的选项大致包含以下几类。这个属性是定义当前的模型是不是一个抽象类。所谓抽象类是不会对应数据库表的。db_table是指定自定义数据库表明的。Django有一套默认的

DAV数据库 / 0评论 2019-11-11

封装Ajax（完整Ajax请求）

<!new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');if (!xml){. return;var o = obj || {};var that = this;this.xml

yzxlemon / 0评论 2014-06-25

「前端」rem 缩放方案 flexible-js 兼容 375px 方案的思路

发表于尚妆github博客，欢迎订阅。首先会介绍375px方案和rem方案的实现原理。具体的开发前提是设计师给到一份750px宽的设计稿，前端同学根据ps量的像素的50%进行css书写。达到在屏幕上完整呈现布局上的内容。但是在同样的安卓原生浏览器上，不管我

csdnuuu / 0评论 2019-11-05

浏览器端-W3School-HTML：HTML DOM Meta 对象

Meta 对象代表 HTML 的 一个 <meta> 元素。<meta> 元素可提供有关某个 HTML 元素的元信息 ，比如描述、针对搜索引擎的关键词以及刷新频率。把 content 属性连接到一个 HTTP 头部。设置或返回用于解

书虫媛 / 0评论 2019-10-29

Django model中的 class Meta 详解

Django有一套默认的按照一定规则生成数据模型对应的数据库表名，如果你想使用自定义的表名，就通过这个属性指定，比如：。由于Django的管理方法中有个lastest()方法，就是得到最近一行记录。默认值为True,这个选项为True时Django可以对数

shawroad / 0评论 2019-10-27

7 HTML的Head内标签

–每3秒自动刷新页面–>-->. <meta name="description" content="谷歌是世界上最好用的搜索引擎">. describe 是网站的描述信息。--在头部设置使用

爱好HtmlCssJs / 0评论 2019-10-25

VUE基本写法

{{ msg }} - {{ count }} - {{ obj.num }} --- {{ arr[1] }}

qsdnet我想学编程 / 0评论 2019-10-24

HTML5实体符号2-9

<!DOCTYPE html>. <meta name="viewport" content="width=device-width, initial-scale=1.0">. <met

爱好HtmlCssJs / 0评论 2019-10-22

jsonp跨域请求数据实例—手机号码查询

网上有很多开放的api，我们在本地通过ajax获取数据时，总会碰到一个问题，那就是跨域！如果不借助php等，仅仅通过js怎么解决跨域的问题呢？或许jsonp是个不错的选择。<input type="text"> <sp

revivre / 0评论 2015-01-24

让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

DOCTYPE html> 大神的帖子总结的bootstrap的查找原因好几条，首先，Bootstrap3 是移动设备优先的原则开发的，所以原因可能如下： 1.没有正确调用远程地址 即只要是IE9以下，就调用两个专门的js <!-- HTML5

whosemario / 0评论 2015-02-12

HTML5开发之meta标签的viewport使用说明

target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]. 控制 viewport 的大小，可以指定一个值或者特殊的值，如 device-width 为设备

scdn / 0评论 2015-06-12

利用html5调用本地摄像头拍照上传图片

<!DOCTYPE HTML>. // Grab elements, create settings, etc.context = canvas.getContext("2d"),videoObj = { "vid

jadechen00 / 0评论 2015-05-18

用Meta标签代码让360双核浏览器默认极速模式不是兼容模式

一个网站，大量采用了html5和css3，希望用户都以webkit内核打开页面，但是测试却发现360的以ie内核打开为推荐模式，不知原因为何。其实360给网站开发者设计了一种选择的方法，只要加入一段Meta标签代码就可以解决以下信息摘自360官方网站：。目

galilajiao00 / 0评论 2015-06-03

WEBAPP介绍及其iOS Web开发技巧总结

WebApp是一种新出现的基于WEB形式的类应用程序，运行在高端的移动终端设备上，其应用范围会越来越广。Native App：1、开发成本非常大。一般使用的开发语言为JAVA、C++、Objective-C。Web App：1、开发成本较低使用html5

bossbusy / 0评论 2015-05-29

页面全屏遮罩的实现 方式

之前做了一个页面，在点击了某个按钮之后，要求页面出现一个全屏遮罩，一开始使用了position:absolute来实现的。当时因为画面大小是固定的，不可以resize的，所以，没有发现问题。最近用了同样的做法做了一个遮罩，但是画面是可以进行resize的，

wangnan0 / 0评论 2015-07-17

考虑有些客户用IE9外其他浏览器，给浏览器设计兼容模式，JSF 前端ie浏览器兼容性问题

总结：JSF本身自己自己带了许多自定义js和css，在jsf转换成html源码后，会自己定义的js和css引入进来，而<meta http-equiv="X-UA-Compatible" content ="IE-8&q

中等偏下 / 0评论 2015-07-17

自己写的在jquery mobile当前页弹出层

<!

海欣海夜 / 0评论 2015-08-27

HTML Meta中添加X-UA-Compatible和IE=Edge，chrome=1有什么作用

Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。简单的说，就是什么版本 IE 就用什么版本的标准模式渲染<meta http-equiv="X-UA-Co

UC浏览器搜索引擎 / 0评论 2015-08-27

underscore应用

判断一个对象数组是否包含某个对象，可以用underscore的方法判断，代码简洁易懂。如contains、indexOf、find、findWhere，需要说明的是contains和indexOf使用===检测。

gufudhn / 0评论 2015-10-28

移动前端开发

作用：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；device-width自动适应。是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；也是iphone的私有标签，它指定的

starleejay / 0评论 2015-10-26

禁止IE8使用兼容模式渲染网页的html代码

<meta http-equiv="X-UA-Compatible" content="IE=8" />这段代码表示开启IE8的标准渲染模式。DOCTYPE>指令确定如何呈现内容。一般我们首选这种兼

MrWhite0 / 0评论 2016-05-03

JQ 内容的显示与隐藏

<title>简单的jQuery hide()方法演示。<p>点我，我就会消失。<title>另一个hide()实例。演示如何隐藏文本。<p>阅谁问君诵，水落清香浮。<title>通过 jQuer

SinhaengHhjian / 0评论 2016-11-19

JQ focus选择器的使用

<div style="width: 200px; margin: 20px auto 0 auto;">. <div id="message" style=" width: 200px;

yongyonglsy / 0评论 2017-02-23