html消失触发事件,三种方法教你HTML实现点击某一个元素之外触发事件

大致编写的HTML界面渲染后是这个样子的，我们现在想要实现的需求是点击Button所在的div不会触发事件，而在点击Button所在的div之外的区域时会触发事件，下面就来介绍三种方法实现。

Button

/* CSS代码 */

.container{

width: 400px;

height: 400px;

display: flex;

align-items: center;

justify-content: center;

border: 1px solid black;

}

.inner{

height: 100px;

width: 100px;

background-color: burlywood;

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

}

方法一、阻止事件冒泡

先给大家画一个示意图理解一下冒泡和捕获

由上面的HTML代码可以看到我们有一个嵌套的div，如果我们点击div的话是按什么顺序触发这两个事件的呢。其实是默认按照冒泡的方式触发的，简单来说就是由内而外，如果还是不明白请看上面的解析图。这就导致我们点击Button所在的div也会触发事件，所以我们要阻止冒泡就可以实现我们的需求

/**

* 方法一

* 利用阻止事件冒泡实现

*/

const inner = document.getElementsByClassName('inner')[0];

const container = document.getElementsByClassName('container')[0];

inner.addEventListener('click', event => {

event.stopPropagation(); // chromium内核

window.event.cancelBubble = true; // IE内核

})

container.addEventListener('click', event => {

console.log('success');

})

方法二、利用判断点击事件的target是否为内部元素

/**

* 下面介绍了三种方法来判断是否为内部元素

* 1.className是否相等，也可以使用id

* 2.DOM元素是否相等

* 3.点击的DOM是否包含内部DIV

*/

container.addEventListener('click', event => {

if('inner' !== event.target.className) {

console.log(`success`);

}

if(inner !== event.target) {

console.log('success');

}

if(event.target.contains(inner) && event.target !== inner) {

console.log('success');

}

})

方法三、使用Vue .self修饰符

当前元素自身时触发处理函数时才会触发函数

原理：是根据event.target确定是否当前元素本身，来决定是否触发的事件/函数

export default {

name: 'app',

components: {

HelloWorld

},

methods:{

container() {

console.log('success')

}

}

}

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

background-color: aqua;

}

这样的话也可以实现点击内部div之外的部分触发特定函数

大家有什么其他的方法可以实现欢迎评论内提出

三种方法教你如何用PHP模拟post提交数据

php模拟post传值在日常的工作中用到的不是很多,但是在某些特定的场合还是经常用到的. 下面,我整理了三种php模拟post传值的方法,file_get_contents.curl和socket. ...

电视不支持AirPlay镜像怎么办？苹果iPhone手机投屏三种方法

导读:苹果手机多屏互动功能在哪里?iPhone苹果手机没有AirPlay镜像怎么办?三种方法教你苹果iPhone手机怎么投影到智能电视上. 前言: 苹果iPhone手机投屏到电视设备上,需要使用到Ai ...

YbSoftwareFactory 代码生成插件【二十五】：Razor视图中以全局方式调用后台方法输出页面代码的三种方法

上一篇介绍了 MVC中实现动态自定义路由 的实现,本篇将介绍Razor视图中以全局方式调用后台方法输出页面代码的三种方法. 框架最新的升级实现了一个页面部件功能,其实就是通过后台方法查询数据库内容,把 ...

python面对对象编程------3：写集合类的三种方法

写一个集合类的三种方法:wrap,extend,invent 一:包装一个集合类 class Deck: def __init__( self ): self._cards = [card6(r+1, ...

jQuery中detach&&remove&&empty三种方法的区别

jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...

Linux中让终端输入变为非阻塞的三种方法

介绍 在linux下每打开一个终端,系统自动的就打开了三个文件,它们的文件描述符分别为0,1,2,功能分别是"标准输入"."标准输出"和"标准错误输出 ...

Javascript定义类(class)的三种方法

将近20年前,Javascript诞生的时候,只是一种简单的网页脚本语言.如果你忘了填写用户名,它就跳出一个警告. 如今,它变得几乎无所不能,从前端到后端,有着各种匪夷所思的用途.程序员用它完成越来越 ...

Iterator to list的三种方法

目录 简介 使用while 使用ForEachRemaining 使用stream 总结 Iterator to list的三种方法 简介 集合的变量少不了使用Iterator,从集合Iterator ...

像画笔一样慢慢画出Path的三种方法(补充第四种)

今天大家在群里大家非常热闹的讨论像画笔一样慢慢画出Path的这种效果该如何实现. 北京-LGL 博客号@ligl007发起了这个话题.然后各路高手踊跃发表意见.最后雷叔 上海-雷蒙 博客号@雷蒙之星 ...

随机推荐

[环境搭建] VS-Visual Studio-IIS Express 支持局域网访问

使用Visual Studio开发Web网页的时候有这样的情况:想要在调试模式下让局域网的其他设备进行访问,以便进行测试.虽然可以部署到服务器中,但是却无法进行调试,就算是注入进程进行调试也是无法达到 ...

PC-1500与PC通讯

目录 第1章说明    2 第2章音频通讯    3 2.1 下载    3 2.2 上传    8 2.2.1 操作    8 2.2.2 音量    8 2.3 直接将BASIC代码转换为wav文 ...

Linux Lab and project latest

samba : start your samba service netlogon syslog vi /usr/local/samba vi /usr/samba/etc/smb.conf smbc ...

自带TabBar选中图片设置问题

设置为UIImageRenderingModeAlwaysOriginal 就会显示出选中状态的图片.当然普通状态的也需要设置. UINavigationController *nav =({ UIN ...

[SQL Server]一次执行资料夹内的.sql 指令码

原文:[SQL Server]一次执行资料夹内的.sql 指令码 初始资料库时,我们Developers们会准备很多.sql指令码来建立资料表.检视甚至初始资料,那麽要怎麽一次执行资料夹内的*.sql ...

HDU1069:Monkey and Banana(DP+贪心)

Problem Description A group of researchers are designing an experiment to test the IQ of a monkey. T ...

JIRA描述默认值设置

JIRA描述默认值设置 Setting a Default Value in the Description Field 转自https://confluence.atlassian.com/jira ...

【编程技巧】EXTJS中Ext.grid.GridPanel配置项autoExpandColumn的使用方法

autoExpandColumn的作用是自动伸展,占满剩余区域.一般使用在列比较少,并且大多数列都比较窄,有一列比较宽的情况下,当然什么时候使用,还是得按照实际情况确定. 使用的时候主要有三点要注意的 ...

Windows系统配置OutLook邮箱教程一

本示例演示Windows系统中OutLook邮箱设置 1.打开控制面板->类型选择小图标->找到Mail(Microsoft OutLook 2016). 2.鼠标左键双击Mail. 3. ...

SpringBoot中使用JNnit4(一)之Mockito的使用

经过入门篇,可以编写出一个简单的测试用例. 这篇讲的是BDDMockito的使用. BDDMockito用于测试时进行打桩处理:通过它可以指定某个类的某个方法在什么情况下返回什么样的值. 在单元测试时 ...