使用Vue.js檢測元素外的點選

我們可以通過建立自定義指令來檢測Vue.js中元素外的點選。比如，我們可以這樣編寫：

<template>
  <!-- 建立一個寬度和高度為 500px 的 DIV，ID 為 "app" -->
  <div id="app" style="width: 500px; height: 500px">
    <!-- 該 DIV 使用了自定義指令 v-click-outside，用來監聽點選元素外部的事件 -->
    <div v-click-outside="onClickOutside">hello world</div>
  </div>
</template>

<script>
  // 導入 Vue 庫
  import Vue from "vue";

  // 建立一個自定義指令 "click-outside"
  Vue.directive("click-outside", {
    // 當指令綁定到元素時，會立即調用 bind 函數
    bind(el, binding, vnode) {
      // 建立一個函數來處理點選事件
      el.clickOutsideEvent = (event) => {
        // 如果點選的不是元素本身，也不是其内部的任何元素，那麼就觸發綁定的函數
        if (!(el === event.target || el.contains(event.target))) {
          // 在 Vue 執行個體上執行綁定的函數
          vnode.context[binding.expression](event);
        }
      };
      // 在 body 元素上添加 click 事件監聽器
      document.body.addEventListener("click", el.clickOutsideEvent);
    },

    // 當指令與元素解除綁定時，會立即調用 unbind 函數
    unbind(el) {
      // 移除在 body 元素上的 click 事件監聽器
      document.body.removeEventListener("click", el.clickOutsideEvent);
    },
  });

  // 導出 Vue 執行個體
  export default {
    name: "App", // 元件名
    methods: {
      // 自定義一個方法來處理點選元素外部的事件
      onClickOutside() {
        console.log("clicked outside"); // 控制台輸出資訊 "clicked outside"
      },
    },
  };
</script>

使用 Vue.directive 方法來添加自定義指令，該方法使用指令名稱和一個對象作為參數，該對象具有 bind 和 unbind 方法以在 bind 方法中添加 el 方法。

在 clickOutsideEvent 方法中，我們檢查 el 是否不是 event.target 并且它不包含 event.target。

如果都為 true，則添加 vnode.context[binding.expression](event); 來運作我們設定為 v-click-outside 指令值的方法。

然後，我們調用 document.body.addEventListener 來添加一個點選事件監聽器以運作 clickOutsideEvent。

在 unbind 方法中，我們使用 removeEventListener 來删除事件監聽器。

然後，在模闆中，我們添加 v-click-outside 并将其值設定為 onClickOutside，以在單擊外部時運作該方法。

當我們單擊外部時，應該看到“clicked outside”被記錄。

結束

我們可以通過建立自定義指令來檢測 Vue.js 中元素外的點選。這段 Vue.js 代碼中的自定義指令 "v-click-outside" 主要用于處理點選元素外部的事件。這種功能在很多應用場景中都非常有用，以下是一些具體的示例：

下拉菜單(Dropdown)或模态視窗(Modal)：當使用者點選下拉菜單或模态視窗的外部區域，我們通常期望下拉菜單或模态視窗會關閉。這就需要檢測使用者是否點選了元素的外部，如果是，那麼就觸發一個函數來關閉下拉菜單或模态視窗。
上下文菜單（Context Menu）：在右鍵打開的上下文菜單中，當使用者點選菜單外的其他地方時，通常需要關閉這個菜單。同樣可以使用這個自定義指令來監聽點選事件，并在點選事件發生在菜單外部時，關閉上下文菜單。
工具提示（Tooltip）：工具提示也有類似的需求。當工具提示展示時，如果使用者點選了工具提示以外的其他地方，我們通常希望工具提示會消失。
表單驗證（Form Validation）：在某些場景下，你可能希望使用者在完成輸入并且點選輸入框外部時，進行表單驗證。你可以利用這個指令來實作這種效果。
搜尋自動完成（Search Autocomplete）：在搜尋框輸入時，會出現一個自動完成的下拉菜單。當使用者在選中某個搜尋建議或者點選搜尋框以外的地方時，我們通常需要關閉這個自動完成的菜單。

在上述所有場景中，通過 "v-click-outside" 這個自定義指令，你可以非常簡單地處理點選元素外部的事件，進而實作你的互動需求。

由于文章内容篇幅有限，今天的内容就分享到這裡，文章結尾，我想提醒您，文章的創作不易，如果您喜歡我的分享，請别忘了點贊和轉發，讓更多有需要的人看到。同時，如果您想擷取更多前端技術的知識，歡迎關注我，您的支援将是我分享最大的動力。我會持續輸出更多内容，敬請期待。

vue短文：如何在Vue.js中檢測在元素外的點選？

使用Vue.js檢測元素外的點選

結束