【前端】如何判断鼠标点击了元素的外部

1. 前言

在实际开发时会有这样的需求：点击某一个按钮出现一个弹窗，然后点弹窗的其他区域时需要关闭弹窗，如果是点击的弹窗本身，除非是关闭操作，否则不关闭弹窗。本文将简单介绍几种这种需求的几种实现方案。

2. 实现

2.1. 通过失焦事件来实现

首先，失焦事件并不是表单元素的专利，通过添加tabindex可以可以让任意一个元素获取失焦事件。

什么是 tabindex ？

tabindex 属性可以有三个值：

• tabindex="0" ：元素可以获得焦点，并且可以通过键盘导航（通常是Tab键）到达。
• tabindex="-1" ：元素可以获得焦点，但不会通过键盘导航到达。这通常用于脚本中通过编程方式设置焦点。
• 无 tabindex 属性：元素默认不会获得焦点。

为div添加tabindex，并且让弹窗自动获取焦点，这样，在点击外部的时候就可以触发弹窗的失焦事件：

注意： 假如弹窗内如果有别的元素（如输入框）可以获取焦点可能会和弹窗冲突

2.2. 通过蒙版

其实蒙版是现在比较主流的一种方法，很多组件库都是用的这个方法，本质就是在要监测的元素下面加个蒙版元素，通过为蒙版添加点击事件来判断用户点击了外界。

这个方法有个缺点就是，对外部的第一次点击时无效的，不会触发外部元素的点击事件，也就说用户想要点击外部的某个按钮需要点击两次。

2.3. 直接遍历元素

众所周知，html的元素的结构为树结构，那么我们就可以通过对树的遍历来判断点击的这个元素是否在窗口中。

简单实现一下：

但是这样的代码太不优雅了，可以封装一个指令来优化：

import { Directive } from "vue";
const wm = new WeakMap<HTMLElement, Function>();

const dfs = (ele: HTMLElement, target: any): boolean => {
  if (ele === target) {
    return true;
  }

  return [...(ele.children || [])].some((item) => dfs(item as HTMLElement, target));
};

const vClickOut: Directive = {
  mounted(box: HTMLElement, { value: cb }) {
    const onClick = (et: Event) => {
      const target = et.target;
      const isClickOut = !dfs(box, target);
      if (isClickOut && cb && typeof cb === "function") {
        cb();
      }
    };
    wm.set(box, onClick);
    window.addEventListener("click", onClick);
  },
  beforeUnmount(el: HTMLElement) {
    window.removeEventListener("click", wm.get(el) as any);
  },
};
export default vClickOut;

使用：

2.4. 借助DOM API 中的contains方法

其实DOM API中有一个Node.contains() 方法，这个方法返回一个布尔值，表示一个节点是否是给定节点的后代，即该节点本身、其直接子节点（childNodes）、子节点的直接子节点等。

简单写个demo：

import { useEffect, useRef, useState } from "react";
import styles from "./index.module.scss";

export default function TestPage() {
  const ref = useRef<HTMLDivElement>();

  useEffect(() => {
    const onClick = (e: PointerEvent) => {
      const clickInner = ref.current.contains(e.target as HTMLElement);
      console.log(clickInner ? "点击了内部" : "点击了外部");
    };
    window.addEventListener("click", onClick);
    return () => {
      window.removeEventListener("click", onClick);
    };
  }, []);

  return (
    <div className={styles["test-page-container"]}>
      <div
        ref={(el) => (ref.current = el as HTMLDivElement)}
        style={{
          width: 500,
          height: 500,
          backgroundColor: "ButtonFace",
        }}
        >
        <div
          style={{
            width: 100,
            height: 100,
            backgroundColor: "red",
          }}
          >
          test
        </div>
      </div>
    </div>
  );
}

这个方法的兼容性也是相当的好：

3. 结语

感谢观看。