大致编写的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发起了这个话题.然后各路高手踊跃发表意见.最后雷叔 上海-雷蒙 博客号@雷蒙之星 ...
随机推荐
ERP产品价格成本计算的几个方法(转)
一般财务计算产品价格又很多方法,我这里做了几个供参考,实体属性主要是编号.数量.价格等,这里就不列出了. /// /// 先进先出算法 ///
JsRender语法
{{:#data.Name}} 或 {{:Name}} 直接显示html格式{{>#data.Name}} 或 {{>Name}} 转义显示html字符 if else {{if bool ...
ADO.Net的小知识(连接数据库)二
上次提到数据库连接有两种形式断开式连接和打开式连接,断开式连接我已经讲解了,下面我来给大家讲解一下打开式连接 (1)引入命名空间:using System.Data.SqlClient; 该语句用于导 ...
Node安装及搭建简单服务器
注:本文安装系统为mac,windows及其他系统下载对应安装包 ,mac下载后的安装包为apk文件,windows为msi文件. 安装 1.在网上下载node安装包,官方网站2.双击下载文件,按步骤 ...
SVN模型仓库中的资源从一个地方移动到另一个地方的办法(很久才解决)
弄了很久,想使用domove这个操作,但是都失败了.最后给svnkit的邮箱写了封邮件,他们告诉我这样做就成功了.实际上是使用docopy这个函数实现了move操作.package com.repos ...
滑动viewpage
Adapter: package com.example.fashionyuan.Adatader; import android.support.v4.app.Fragment;import and ...
localStorage,sessionStorage的使用
最近因为项目上需要使用到客户端存储,所以稍微研究了一下,以下说说自己的理解和使用经验 1.调用方法相同 各自都包含以下几种操作: //根据key获取对应的值; window.sessionStorag ...
QT获取窗口句柄
winId()函数 SendMessage((HWND)(this->dlg->winId()),WM_SEND_MY_MESSAGE,0,0);
Ubuntu关机时间过长,总是停在logo界面
有时候我们总能遇到ubuntu关机的时候卡住,无法关机,一查看发现是" a stop job is running..." 然后后面接着一串等待时间. 这时候我们需要修改一下sys ...
由pushViewController说起可能出线的各种死法
做苹果开发或者果粉对导航条这个东西应该都不陌生,这咚咚在小小的屏幕上通过一个简单的View的队列管理来做到手机界面的有条理管理,但是开发过程程序员可能碰到各种死法,下面分享一二. ...