vue短文：如何在Vue.js中檢測(cè)在元素外的點(diǎn)擊？（vue判斷點(diǎn)擊了哪個(gè)按鈕）

轉(zhuǎn)載說明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載

有時(shí)候，我們想要在Vue.js中檢測(cè)元素外的點(diǎn)擊。在本文中，我們將探討如何使用Vue.js檢測(cè)元素外的點(diǎn)擊。

使用Vue.js檢測(cè)元素外的點(diǎn)擊

我們可以通過創(chuàng)建自定義指令來檢測(cè)Vue.js中元素外的點(diǎn)擊。比如，我們可以這樣編寫：

<template> <!-- 創(chuàng)建一個(gè)寬度和高度為 500px 的 DIV，ID 為 "app" --> <div id="app" style="width: 500px; height: 500px"> <!-- 該 DIV 使用了自定義指令 v-click-outside，用來監(jiān)聽點(diǎn)擊元素外部的事件 --> <div v-click-outside="onClickOutside">hello world</div> </div></template><script> // 導(dǎo)入 Vue 庫 import Vue from "vue"; // 創(chuàng)建一個(gè)自定義指令 "click-outside" Vue.directive("click-outside", { // 當(dāng)指令綁定到元素時(shí)，會(huì)立即調(diào)用 bind 函數(shù) bind(el, binding, vnode) { // 創(chuàng)建一個(gè)函數(shù)來處理點(diǎn)擊事件 el.clickOutsideEvent = (event) => { // 如果點(diǎn)擊的不是元素本身，也不是其內(nèi)部的任何元素，那么就觸發(fā)綁定的函數(shù) if (!(el === event.target || el.contains(event.target))) { // 在 Vue 實(shí)例上執(zhí)行綁定的函數(shù) vnode.context[binding.expression](event); } }; // 在 body 元素上添加 click 事件監(jiān)聽器 document.body.addEventListener("click", el.clickOutsideEvent); }, // 當(dāng)指令與元素解除綁定時(shí)，會(huì)立即調(diào)用 unbind 函數(shù) unbind(el) { // 移除在 body 元素上的 click 事件監(jiān)聽器 document.body.removeEventListener("click", el.clickOutsideEvent); }, }); // 導(dǎo)出 Vue 實(shí)例 export default { name: "App", // 組件名 methods: { // 自定義一個(gè)方法來處理點(diǎn)擊元素外部的事件 onClickOutside() { console.log("clicked outside"); // 控制臺(tái)輸出信息 "clicked outside" }, }, };</script>

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

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

如果都為 true，則添加 vnode.context[binding.expression](event); 來運(yùn)行我們?cè)O(shè)置為 v-click-outside 指令值的方法。

然后，我們調(diào)用 document.body.addEventListener 來添加一個(gè)點(diǎn)擊事件監(jiān)聽器以運(yùn)行 clickOutsideEvent。

在 unbind 方法中，我們使用 removeEventListener 來刪除事件監(jiān)聽器。

然后，在模板中，我們添加 v-click-outside 并將其值設(shè)置為 onClickOutside，以在單擊外部時(shí)運(yùn)行該方法。

當(dāng)我們單擊外部時(shí)，應(yīng)該看到“clicked outside”被記錄。

結(jié)束

我們可以通過創(chuàng)建自定義指令來檢測(cè) Vue.js 中元素外的點(diǎn)擊。這段 Vue.js 代碼中的自定義指令 "v-click-outside" 主要用于處理點(diǎn)擊元素外部的事件。這種功能在很多應(yīng)用場(chǎng)景中都非常有用，以下是一些具體的示例：

1. 下拉菜單(Dropdown)或模態(tài)窗口(Modal)： 當(dāng)用戶點(diǎn)擊下拉菜單或模態(tài)窗口的外部區(qū)域，我們通常期望下拉菜單或模態(tài)窗口會(huì)關(guān)閉。這就需要檢測(cè)用戶是否點(diǎn)擊了元素的外部，如果是，那么就觸發(fā)一個(gè)函數(shù)來關(guān)閉下拉菜單或模態(tài)窗口。
2. 上下文菜單（Context Menu）： 在右鍵打開的上下文菜單中，當(dāng)用戶點(diǎn)擊菜單外的其他地方時(shí)，通常需要關(guān)閉這個(gè)菜單。同樣可以使用這個(gè)自定義指令來監(jiān)聽點(diǎn)擊事件，并在點(diǎn)擊事件發(fā)生在菜單外部時(shí)，關(guān)閉上下文菜單。
3. 工具提示（Tooltip）： 工具提示也有類似的需求。當(dāng)工具提示展示時(shí)，如果用戶點(diǎn)擊了工具提示以外的其他地方，我們通常希望工具提示會(huì)消失。
4. 表單驗(yàn)證（Form Validation）： 在某些場(chǎng)景下，你可能希望用戶在完成輸入并且點(diǎn)擊輸入框外部時(shí)，進(jìn)行表單驗(yàn)證。你可以利用這個(gè)指令來實(shí)現(xiàn)這種效果。
5. 搜索自動(dòng)完成（Search Autocomplete）： 在搜索框輸入時(shí)，會(huì)出現(xiàn)一個(gè)自動(dòng)完成的下拉菜單。當(dāng)用戶在選中某個(gè)搜索建議或者點(diǎn)擊搜索框以外的地方時(shí)，我們通常需要關(guān)閉這個(gè)自動(dòng)完成的菜單。

在上述所有場(chǎng)景中，通過 "v-click-outside" 這個(gè)自定義指令，你可以非常簡(jiǎn)單地處理點(diǎn)擊元素外部的事件，進(jìn)而實(shí)現(xiàn)你的交互需求。

由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請(qǐng)別忘了點(diǎn)贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時(shí)，如果您想獲取更多前端技術(shù)的知識(shí)，歡迎關(guān)注我，您的支持將是我分享最大的動(dòng)力。我會(huì)持續(xù)輸出更多內(nèi)容，敬請(qǐng)期待。