轉(zhuǎn)載說(shuō)明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載
有時(shí)候，我們想要在Vue.js中檢測(cè)元素外的點(diǎn)擊。在本文中，我們將探討如何使用Vue.js檢測(cè)元素外的點(diǎn)擊。
使用Vue.js檢測(cè)元素外的點(diǎn)擊
我們可以通過(guò)創(chuàng)建自定義指令來(lái)檢測(cè)Vue.js中元素外的點(diǎn)擊。比如，我們可以這樣編寫(xiě)：
<template> <!-- 創(chuàng)建一個(gè)寬度和高度為 500px 的 DIV，ID 為 "app" --> <div id="app" style="width: 500px; height: 500px"> <!-- 該 DIV 使用了自定義指令 v-click-outside，用來(lái)監(jiān)聽(tīng)點(diǎn)擊元素外部的事件 --> <div v-click-outside="onClickOutside">hello world</div> </div></template><script> // 導(dǎo)入 Vue 庫(kù) 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ù)來(lái)處理點(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)聽(tīng)器 document.body.addEventListener("click", el.clickOutsideEvent); }, // 當(dāng)指令與元素解除綁定時(shí)，會(huì)立即調(diào)用 unbind 函數(shù) unbind(el) { // 移除在 body 元素上的 click 事件監(jiān)聽(tīng)器 document.body.removeEventListener("click", el.clickOutsideEvent); }, }); // 導(dǎo)出 Vue 實(shí)例 export default { name: "App", // 組件名 methods: { // 自定義一個(gè)方法來(lái)處理點(diǎn)擊元素外部的事件 onClickOutside() { console.log("clicked outside"); // 控制臺(tái)輸出信息 "clicked outside" }, }, };</script>
使用 Vue.directive 方法來(lái)添加自定義指令，該方法使用指令名稱(chēng)和一個(gè)對(duì)象作為參數(shù)，該對(duì)象具有 bind 和 unbind 方法以在 bind 方法中添加 el 方法。
在 clickOutsideEvent 方法中，我們檢查 el 是否不是 event.target 并且它不包含 event.target。
如果都為 true，則添加 vnode.context[binding.expression](event); 來(lái)運(yùn)行我們?cè)O(shè)置為 v-click-outside 指令值的方法。
然后，我們調(diào)用 document.body.addEventListener 來(lái)添加一個(gè)點(diǎn)擊事件監(jiān)聽(tīng)器以運(yùn)行 clickOutsideEvent。
在 unbind 方法中，我們使用 removeEventListener 來(lái)刪除事件監(jiān)聽(tīng)器。
然后，在模板中，我們添加 v-click-outside 并將其值設(shè)置為 onClickOutside，以在單擊外部時(shí)運(yùn)行該方法。
當(dāng)我們單擊外部時(shí)，應(yīng)該看到“clicked outside”被記錄。
結(jié)束
我們可以通過(guò)創(chuàng)建自定義指令來(lái)檢測(cè) Vue.js 中元素外的點(diǎn)擊。這段 Vue.js 代碼中的自定義指令 "v-click-outside" 主要用于處理點(diǎn)擊元素外部的事件。這種功能在很多應(yīng)用場(chǎng)景中都非常有用，以下是一些具體的示例：
- 下拉菜單(Dropdown)或模態(tài)窗口(Modal)： 當(dāng)用戶(hù)點(diǎn)擊下拉菜單或模態(tài)窗口的外部區(qū)域，我們通常期望下拉菜單或模態(tài)窗口會(huì)關(guān)閉。這就需要檢測(cè)用戶(hù)是否點(diǎn)擊了元素的外部，如果是，那么就觸發(fā)一個(gè)函數(shù)來(lái)關(guān)閉下拉菜單或模態(tài)窗口。
- 上下文菜單（Context Menu）： 在右鍵打開(kāi)的上下文菜單中，當(dāng)用戶(hù)點(diǎn)擊菜單外的其他地方時(shí)，通常需要關(guān)閉這個(gè)菜單。同樣可以使用這個(gè)自定義指令來(lái)監(jiān)聽(tīng)點(diǎn)擊事件，并在點(diǎn)擊事件發(fā)生在菜單外部時(shí)，關(guān)閉上下文菜單。
- 工具提示（Tooltip）： 工具提示也有類(lèi)似的需求。當(dāng)工具提示展示時(shí)，如果用戶(hù)點(diǎn)擊了工具提示以外的其他地方，我們通常希望工具提示會(huì)消失。
- 表單驗(yàn)證（Form Validation）： 在某些場(chǎng)景下，你可能希望用戶(hù)在完成輸入并且點(diǎn)擊輸入框外部時(shí)，進(jìn)行表單驗(yàn)證。你可以利用這個(gè)指令來(lái)實(shí)現(xiàn)這種效果。
- 搜索自動(dòng)完成（Search Autocomplete）： 在搜索框輸入時(shí)，會(huì)出現(xiàn)一個(gè)自動(dòng)完成的下拉菜單。當(dāng)用戶(hù)在選中某個(gè)搜索建議或者點(diǎn)擊搜索框以外的地方時(shí)，我們通常需要關(guān)閉這個(gè)自動(dòng)完成的菜單。
在上述所有場(chǎng)景中，通過(guò) "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)期待。
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶(hù)自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。