Node.contains() 报错， vue中监听点击事件，除了点击自己，点击其他地方将自身隐藏

更新: 添加完整示例：

test.vue文件 (点击id为content的p,flag的值不会改变;点击页面的其他地方，flag的值会改变)

<template><div class="test"><p id="content">******* {{ flag }}****</p></div>
</template>
<script>
export default {data() {return {flag: true,}},mounted() {document.addEventListener('click', this.handleClick)},beforeDestroy() {document.removeEventListener('click', this.handleClick)},methods: {change() {this.flag = !this.flag},handleClick(e) {const content = document.getElementById('content')!content.contains(e.target) && this.change()},},
}
</script>

一、报错信息：

Uncaught TypeError: _this.$refs.contextMenuBox.contains is not a function at HTMLDocument.eval

代码如下：

  mounted() {// 监听，除了点击自己，点击其他地方将自身隐藏document.addEventListener("click", e => {const flag =this.$refs.contextMenuBox.contains(e.target);if (!flag) {this.rightFlag = false;}});},

报错截图：

二、解决办法 ( 正解）

用js原生获取dom的方法代替ref方式

实现效果的代码如下：

   mounted() {// 监听，除了点击自己，点击其他地方将自身隐藏document.addEventListener("click", e => {const contextMenuBox= document.getElementById("contextMenuBox");if (contextMenuBox) { if (!contextMenuBox.contains(e.target)) {this.rightFlag = false;}}});},

三、究其原因

ref方式获取的和js原生方式获取的dom类型不同，故用原生的js获取dom方式代替ref方式即可。

   mounted() {// 监听，除了点击自己，点击其他地方将自身隐藏document.addEventListener("click", e => {console.log("原生js获取：", document.getElementById("contextMenuBox"));console.log("Vue的ref方式：", this.$refs.contextMenuBox);const flag = document.getElementById("contextMenuBox").contains(e.target);if (!flag) {this.rightFlag = false;}});},

俩类型不同：

ref方式获取的和js原生方式获取的dom类型不同，用原生的js获取dom方式代替ref方式即可 ,如
document.getElementById(“box”).contains(e.target)
第一种方法中的其它地方不作改变

四、关于`Node.contains()`

Node.contains()返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点。

参考：MDN

Node.contains() 报错， vue中监听点击事件，除了点击自己，点击其他地方将自身隐藏相关推荐

vue输入框输入触发事件_详解.vue文件中监听input输入事件（oninput）
详解.vue文件中监听input输入事件(oninput) .vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变 ...
vue输入框输入触发事件_.vue文件中监听input输入事件oninput详解
.vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件, ...
vue 中监听并设置scrollTop
vue 中监听并设置scrollTop 问题描述: 目前在做一个项目,父子组件以及兄弟组件中数据调用比较频繁.但是鉴于项目没那么大,就没有使用vuex.直接使用了this.$emit来给父级组件传递参 ...
Vue中监听页面刷新和关闭beforeunload事件
代码在methods中定义事件方法,在mounted 生命周期钩子中绑定事件, 在destoryed钩子中卸载事件 mounted () {window.addEventListener('befo ...
监听关闭页面事件 ajax,Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
网上很多博客说监听窗口关闭事件使用window.beforeunload,但是这个监听事件也会在页面刷新的时候执行,经过百度和自己的实际测试, 终于解决了这个问题,代码如下: mounted() { ...
vue 中监听document.body.scrollTop 值总为0的解决方法
// 基础资料网页正文全文高: document.body.scrollHeight; 网页被卷去的高: document.body.scrollTop; scrollTop 设置或获取位于对象最顶 ...
【js监听报错】页面监听js报错问题
<html> <head> <script type="text/javascript">// 页面监听js报错问题 οnerrοr=handl ...
vue中监听input框获取焦点，失去焦点的问题
一.背景博主之前在用vue的获取焦点,失去焦点的时候,出现了@blur和@focus无效的情况.当时百思不得其解.今天又在写vue页面的时候,突然@blur和@focus又好用了.emmmm,看来这 ...
vue中监听属性watch使用详解
深度监听: (1)vue中的watch默认不监测对象内部值的改变(一层). (2)配置deep:true可以监测对象内部值改变(多层). 备注: (1)vue自身可以监测对象内部值的改变,但vue提供 ...

Node.contains() 报错， vue中监听点击事件，除了点击自己，点击其他地方将自身隐藏

一、报错信息：

二、解决办法 ( 正解）

三、究其原因

四、关于`Node.contains()`

Node.contains() 报错， vue中监听点击事件，除了点击自己，点击其他地方将自身隐藏相关推荐

最新文章

热门文章

Node.contains() 报错， vue中监听点击事件，除了点击自己，点击其他地方将自身隐藏

一、报错信息：

二、解决办法 ( 正解 ）

三、究其原因

四、关于Node.contains()

Node.contains() 报错， vue中监听点击事件，除了点击自己，点击其他地方将自身隐藏相关推荐

最新文章

热门文章

二、解决办法 ( 正解）

四、关于`Node.contains()`