点击除目标元素以外区域触发事件

夏沫悠然

已于 2024-02-06 17:33:25 修改

阅读量430

点赞数 9

文章标签： vue.js javascript 前端

于 2024-02-06 16:52:06 首次发布

本文链接：https://blog.csdn.net/qq_37304058/article/details/136059395

版权

该篇文章详细描述了一个Vue组件中如何使用`mounted`生命周期钩子监听点击事件，判断是否应隐藏元素，条件是点击目标不包含特定类名tree-popper和el-input

摘要由CSDN通过智能技术生成

mounted () {

const that = this

document.addEventListener('click', (e) => {

if (that.visible) {

if (e.target.className.indexOf('tree-popper') === -1 && e.target.className.indexOf('el-input') === -1) {

that.visible = false

}

})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

夏沫悠然

关注关注

9
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue实现点击某个dom元素之外的方法

qq_29236119的博客

03-22

3055

在项目开发中搜索按钮点击出现搜索框内容，这个时候点击搜索框以外的内容，搜索框隐藏掉，如下所示： 1、源码 2、实现点击其他区域搜索框内容隐藏，如下： document.addEventListener('click', (e) => { if (this.$refs.showPanel) { let isSelf = this.$refs.showPanel.contains(e.target) if (!isSelf) { this.searchbox =

html点击除某个元素之外的元素的事件添加技巧

weixin_43900374的博客

02-23

2178

可以利用css中的z-index属性来完成，先在页面添加一个div，设置这个div的属性为：宽高都为100%，透明属性opacity为0，绝对定位为top：0，left：0，暂且称这个div为a，添加这个a的目的是想将它覆盖在整个页面之上，因为设置了opacity为0，所以是透明的，这是点击任何元素都不会触发它的绑定事件，因为被a给覆盖了，这时将排除之外的元素（也就是除了这个元素外点击其他元素会触...

参与评论您还未登录，请先登录后发表或查看评论

Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

10-15

主要介绍了Vue实现点击当前元素以外的地方隐藏当前元素，文中给大家扩展了vue实现点击其他地方隐藏div的三种方法,需要的朋友可以参考下

vue点击区域之外的元素执行方法

q879936814的博客

08-23

158

给最外层元素绑定click方法，使用event.target区分，如果是目标区域的target，就不执行逻辑。

JS 点击某元素以外的地方触发事件 - Kaiqisan

Kaiqisan的博客

08-27

1万+

JS 点击某元素以外的地方触发事件 ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,在半年前让我十分头疼的问题，自从我开始正式学习event事件和DOM之后，我：就这？就这？解决这个问题的核心关键还是利用event对象现在有HTML代码如下 <div style="width: 400px;height: 300px;border: 1px solid #000000; margin: 10% auto 0 auto; text-align: ce

vue js 自定义指令点击自身元素外触发事件 点击自身元素外隐藏自身

DarlingYL的博客

04-27

1941

vue js 自定义指令点击自身元素外触发事件 点击自身元素外隐藏自身自定义的搜索栏，点击红框以外的元素或区域时，关闭红框，类似弹窗的遮罩，点击遮罩就关闭弹窗。

vue2/3点击区域外触发方法(超简单，秒会)

qq_42405304的博客

09-11

6888

此时，点击绑定该方法外的区域就会触发该方法啦。全局注册指令的话用起来更方便，不用再用原生单独一个个绑定了。

vue中如何实现点击除了自己元素及其内部元素之外都将自身元素隐藏的功能

ouo

12-12

1322

1.目标元素布局 <template> <div id="emoji"> <span class="emoji-icon"></span> <img class="emoji-icon" @click.stop="handleShowEmoji" src="../../static//...

点击元素以外的地方隐藏元素插件

03-28

这意味着用户可以在某些特定区域（如导航栏、按钮等）点击时，即使这些区域在目标元素之外，也不会触发隐藏操作。这可以通过设置插件选项来实现，例如，可以传递一个包含忽略元素选择器的数组，以便插件在判断是否...

js,监听点击元素以外的区域，然后隐藏元素

热门推荐

梓沐666的博客

04-19

1万+

哈喽，大家好，我是 SuperYing。今天我们聊一个 Vue3 自定义指令 — ClickOutside，顾名思义，就是处理点击当前区域之外的位置的场景。 Vue 指令首先，我们先来回顾一下 Vue 指令相关的知识点。简介 Vue 指令是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式。指令的职责是当表达式的值改变时，将其产生的连带影响，响应式的作用于 DOM。注册方式 1.全局注册通过 Vue 实例对象的 directive

解决点击某元素以外的地方触发事件以及模拟点击事件

m0_73884922的博客

06-25

325

使用JavaScript中的 dispatchEvent() 方法，模拟用户交互事件

VUE_vue2/3点击区域外触发方法，点击除某个元素触发监听

小歪博客

03-12

955

VUE_vue2/3点击区域外触发方法，点击除某个元素触发监听

vue自定义指令实现点击元素以外区域隐藏当前元素

V_AYA_V的博客

06-18

990

经常接到这样的需求，自己实现一个弹窗，点击弹窗以外地方隐藏当前弹窗，抽空安排一下vue自定义指令。实现思想监听点击事件 判断点击事件target会否为当前dom 主意取消监听事件实现过程实现clickoutside .js const clickoutside = { bind(el, binding) { const documentHandler = (e) => { if (el.contains(e.target)) return false .

vue3中通过自定义指令，实现点击空白处触发事件，点击非自身dom触发事件

技术前端，忠于热爱 @回忆哆啦没有A梦

12-16

4542

vue3中通过自定义指令，实现点击空白处触发事件，点击非自身dom触发事件。我们经常在开发过程中，会遇到这些问题： - 怎么实现点击空白处关闭指定盒子？ - 怎么实现点击空白处收起下拉框？即，怎么触发点击空白处事件，怎么触发点击非自身dom而触发的事件？

监听在元素之外点击

qq_42651173的博客

07-30

897

使用场景举例： 1.接口返回一个数组对象，展示时每行固定显示n个，则可将返回的数组转成二维数组[[...n], [...n]...]的形式循环展示。