轉載說明：原創不易，未經授權，謝絕任何形式的轉載
有時候，我們想要在Vue.js中檢測元素外的點擊。在本文中，我們將探討如何使用Vue.js檢測元素外的點擊。
使用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" 這個自定義指令，你可以非常簡單地處理點擊元素外部的事件，進而實現你的交互需求。
由于文章內容篇幅有限，今天的內容就分享到這里，文章結尾，我想提醒您，文章的創作不易，如果您喜歡我的分享，請別忘了點贊和轉發，讓更多有需要的人看到。同時，如果您想獲取更多前端技術的知識，歡迎關注我，您的支持將是我分享最大的動力。我會持續輸出更多內容，敬請期待。
版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 舉報，一經查實，本站將立刻刪除。