三种方法教你HTML实现点击某一个元素之外触发事件
大致编写的HTML界面渲染后是这个样子的，我们现在想要实现的需求是点击Button所在的div不会触发事件，而在点击Button所在的div之外的区域时会触发事件，下面就来介绍三种方法实现。
<!-- HTML代码 -->
<html>
<head>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="container">
<div class="inner">
Button
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
/* 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确定是否当前元素本身，来决定是否触发的事件/函数
<template>
<div id="app" @click.self="container">
<img alt="Vue logo" src="./assets/logo.png" >
</div>
</template>
<script>
export default {
name: 'app',
components: {
HelloWorld
},
methods:{
container() {
console.log('success')
}
}
}
</script>
<style>
#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;
}
</style>
这样的话也可以实现点击内部div之外的部分触发特定函数
大家有什么其他的方法可以实现欢迎评论内提出
php模拟post传值在日常的工作中用到的不是很多,但是在某些特定的场合还是经常用到的. 下面,我整理了三种php模拟post传值的方法,file_get_contents.curl和socket. ... 导读:苹果手机多屏互动功能在哪里?iPhone苹果手机没有AirPlay镜像怎么办?三种方法教你苹果iPhone手机怎么投影到智能电视上. 前言: 苹果iPhone手机投屏到电视设备上,需要使用到Ai ... 上一篇介绍了 MVC中实现动态自定义路由 的实现,本篇将介绍Razor视图中以全局方式调用后台方法输出页面代码的三种方法. 框架最新的升级实现了一个页面部件功能,其实就是通过后台方法查询数据库内容,把 ... 写一个集合类的三种方法:wrap,extend,invent 一:包装一个集合类 class Deck: def __init__( self ): self._cards = [card6(r+1, ... jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ... 介绍 在linux下每打开一个终端,系统自动的就打开了三个文件,它们的文件描述符分别为0,1,2,功能分别是"标准输入"."标准输出"和"标准错误输出 ... 将近20年前,Javascript诞生的时候,只是一种简单的网页脚本语言.如果你忘了填写用户名,它就跳出一个警告. 如今,它变得几乎无所不能,从前端到后端,有着各种匪夷所思的用途.程序员用它完成越来越 ... 目录 简介 使用while 使用ForEachRemaining 使用stream 总结 Iterator to list的三种方法 简介 集合的变量少不了使用Iterator,从集合Iterator ... 今天大家在群里大家非常热闹的讨论像画笔一样慢慢画出Path的这种效果该如何实现. 北京-LGL 博客号@ligl007发起了这个话题.然后各路高手踊跃发表意见.最后雷叔 上海-雷蒙 博客号@雷蒙之星 ... 本文源码:GitHub·点这里 || GitEE·点这里 一.AOP基础简介 1.切面编程简介 AOP全称:Aspect Oriented Programming,面向切面编程.通过预编译方式和运行期 ... 这个是之前生产上打算迁移的文档,后面离职了没有在停机迁移,但是测试过几次没有问题,其中需要把9I的110,120库迁移到11g一个数据库中,但是110,120库之间有相同的表名字,以及有DBLINK. ... 1 简介 万恶的null已经折磨程序员许久了,也带来了许多难以发现却造成严重损失的NullPointerException.我们需要尽可能的避免它,有一种简单的办法就是在它进入下轮处理前,我们就把它扼 ... 实用工具 前端在线工具 兼容性速查 html5兼容性查询 node-es6支持度 es6兼容性表查询 设备es6支持度 游览器H5支持度 浏览器内核检测工具 手机设备信息检测 浏览器市场份额 文档手册 ... File类是一个与流无关的类.File类的对象可以获取文件及其文件所在的目录.文件的长度等信息. 1.File对象的常用构造方法. (1)File(String pathname) File file ... 一.整体结构分析 整体结构 通过在nodejs环境对源码的打印,我们最终得到的gulp实例行如下图.那么我们gulp实例上的属性和方法是如何生成的呢? Gulp { domain: null, _ev ... 这个作业属于哪个课程 C语言程序设计I 这个作业要求在哪里 作业链接 我在这个课程的目标是 熟悉分支结构 这个作业在那个具体方面帮助我实现目标 可以更完整的编写程序及博客园 参考文献 [参考文献](h ... package com.vcgeek.hephaestus.utils; import java.security.MessageDigest; public class Md5Utils { /** ... Description [题目描述] 给定一个长度为n的由['0'..'9']组成的字符串s,v[i,j]表示由字符串s第i到第j位组成的十进制数字. 将它的某一个上升序列定义为:将这个字符串切割成m ... 实例一.显示一个基本的字符串在网页中 首先先进入views.py def home(request): string = u'随便写' return render(request, 'home.htm ...三种方法教你HTML实现点击某一个元素之外触发事件的更多相关文章
随机推荐