event.target.classList.contains来获取元素存在的问题（此案例为我：右键打开弹框，左键无法关闭问题的衍生）笔记自用

本意监听鼠标左键的方法，判断是否点击到了需要的class；

		document.addEventListener('mousedown', this.handleWindowClick);  // 鼠标左键
		// 是否点击了这个盒子
		// 客服消息左键
		handleWindowClick(event) {
			// 鼠标左键没有点击到class为rightClickBox的盒子时，关闭引用弹框
			if (!event.target.classList.contains('rightClickBox')) {
				// 关闭引用弹框
				this.showrightClickBox = false;
			} 
		},

但是存在bug，当名为rightClickBox的盒子里面存在其它内容的时候，也会被判定为没有点击弹框

// 这样写，我点哪里，他都会认为我点击的是这个盒子，故而不会关闭
<div
			v-if="showrightClickBox"
			class="rightClickBox"
			@click="clickCite"
		>
			引用
		</div>


// 这样写当我点击引用文字所在的div时，判定我没有点击在名为rightClickBox的class盒子上，关闭
<div
			v-if="showrightClickBox"
			class="rightClickBox"
			@click="clickCite"
		>
		// 因为这里是一个div
			<div>引用</div>
		</div>

所以会导致，我右键打开class为rightClickBox的盒子时，左键空白区域可以实现功能，但是左键引用字符的时候不实现功能；

解决方法：
使用 event.target.closest
向上查找，找到指定的元素

handleWindowClick(event) {
			// 从点击的dom树一直向上查找，直到找到需要找的class元素
			const clickedInsideRightClickBox = event.target.closest('.rightClickBox');
			// 左键找到了，不关闭，没找到关闭引用
			if (!clickedInsideRightClickBox) {
				// 关闭引用弹框
				this.showrightClickBox = false;
			}
		}

这样，点击子元素时，它不会单纯的判定是不是点击的这个class的盒子，而是向上找，解决了点击空白区域和点击文字区域导致的功能失效问题。