nput及button這樣的表單元素有disbale屬性, 如何設置是否可用屬性的方法一般用$("#id").attr('disbaled','true')及$("#id").prop('disbaled','false')，

對span img這樣的沒有disbale的屬性, 這種方法就不起作用了, 此時可用$("#id").setAttribute('onclick',function())或$("#id").removeAttribute("onclick")方法來設置事件是否可用。

制臺JavaScript是網頁開發中強大而靈活的工具之一。本教程將向您展示如何利用控制臺JavaScript來實現一個常見的任務：通過代碼批量點擊按鈕。無論您是網頁開發新手還是經驗豐富的開發者，掌握這項技能都將大大提高您的工作效率。

場景介紹：

在網頁開發中，經常需要對大量數據或元素進行批量操作。手動點擊每個按鈕可能會非常耗時且繁瑣。但是，通過控制臺JavaScript，我們可以輕松地編寫腳本來自動執行這些任務。本教程將介紹如何使用控制臺JavaScript來實現一個簡單但實用的功能：批量點擊按鈕。文章源自玩技e族-https://www.playezu.com/828116.html

文章源自玩技e族-https://www.playezu.com/828116.html

操作步驟：

1. 了解目標按鈕：首先，我們需要了解要點擊的按鈕的結構和位置。在本示例中，我們的目標按鈕具有特定的類名和父元素結構。通過檢查頁面元素或查看源代碼，我們可以確定目標按鈕的選擇器。

2. 編寫控制臺JavaScript代碼：使用我們提供的控制臺JavaScript代碼，我們可以輕松地實現批量點擊按鈕的功能。代碼通過選擇目標按鈕的選擇器，并使用click()方法模擬點擊按鈕的操作。同時，我們還通過設置間隔時間，確保按鈕的點擊操作按照我們預期的順序執行。

代碼執行

文章源自玩技e族-https://www.playezu.com/828116.html

// 獲取所有帶有類名 'trash' 的 span 元素let trashSpans = document.querySelectorAll('div.row-actions > span.trash > a.submitdelete'); // 定義計數器以便追蹤當前點擊的索引let currentIndex = 0; // 創建一個計時器，每隔一秒執行一次let clickInterval = setInterval(() => {    // 檢查是否所有鏈接都已經被點擊過，如果是則清除計時器    if (currentIndex >= trashSpans.length) {        clearInterval(clickInterval);        console.log("所有鏈接已點擊完成。");        return;    }     // 獲取當前要點擊的鏈接    let trashLink = trashSpans[currentIndex];     // 打印當前鏈接的 href 屬性以確保它是正確的    console.log(trashLink.href);     // 模擬點擊事件    trashLink.click();     // 增加索引以點擊下一個鏈接    currentIndex++;}, 1000); // 每隔一秒執行一次

文章源自玩技e族-https://www.playezu.com/828116.html

（輸入代碼準備執行）文章源自玩技e族-https://www.playezu.com/828116.html

打開瀏覽器控制臺，將上述代碼粘貼到控制臺中，并按下Enter鍵執行。您將看到按鈕被自動點擊，并且相應的操作被執行。文章源自玩技e族-https://www.playezu.com/828116.html

文章源自玩技e族-https://www.playezu.com/828116.html

（執行中...）文章源自玩技e族-https://www.playezu.com/828116.html

文章源自玩技e族-https://www.playezu.com/828116.html

（執行結束）文章源自玩技e族-https://www.playezu.com/828116.html

以上結論：

通過控制臺JavaScript，我們可以輕松實現批量點擊按鈕的功能，從而大大提高了網頁操作的效率。無論是在網頁開發過程中還是日常網頁瀏覽中，掌握這項技能都將為我們帶來便利和效率。希望本教程能夠幫助您更好地利用控制臺JavaScript，并提高您的工作效率！

求

有很多功能模塊。用戶等級不同可以使用的功能也不一樣。但是所有模塊的頁面必須全部顯示。
只有點擊的時候如果沒這個功能的權益才提示去購買。并且攔截原先按鈕的點擊事件函數。

最終實現使用：

<template>
    <el-button @click="oldClickHandle"  v-hasService="'order'">查看訂單</el-button>
</template>

思路：

思路1： 在oldClickHandle內部判斷權限邏輯。
這樣每個用到的點擊處理函數都要修改,這種方式對代碼的侵入性很強。

思路2（采用）：

編寫vue指令。 在指令mounted階段增加點擊事件監聽器。點擊的時候觸發指令的監聽器后。判斷是否有功能權限。再決定是否停止事件繼續傳播和提示去購買。

問題：

編寫指令后發現@click綁定的事件處理函數執行會優先于指令增加的事件處理函數。
這就很難受了，正常來說確實是同一個元素綁定多個事件偵聽器是按照綁定的順序執行的。
例如：

el.addEventListener('click', handler1)
el.addEventListener('click', handler2)

點擊元素的話會先執行 handler1再執行handler2。
但我們希望先執行handler2在執行handler1。

原理：

這時候就要引入捕獲和冒泡的知識了。 去MDN尋找答案。

先看addEventListener的一個useCapture參數

看一下Dom事件流（傳播流程）圖

可以知道事件流向分3個階段：

捕獲階段:事件對象通過目標的祖先從Window傳播到目標的父對象。這個階段也被稱為捕獲階段。

目標階段:事件對象到達事件對象的事件目標。這一階段也被稱為靶期。如果事件類型表明事件不冒泡，則事件對象將在此階段完成后停止。

冒泡階段:事件對象以相反的順序通過目標的祖先傳播，從目標的父對象開始，以Window結束。這個階段也被稱為冒泡階段。

事件處理函數在哪個階段被執行？

根據文檔得知。默認是冒泡階段執行。
但是如果執行addEventListener時候最后一個參數（useCaptreue）設置為true。
就會在捕獲階段執行事件處理函數。

根據上面的事件流向圖，可以知道捕獲階段先于冒泡階段。

解決方案自然就出來了：useCaptreue設置為true讓事件處理函數在捕獲階段執行。

指令源碼

附上指令代碼：

import { Directive } from 'vue'

let hasCodes = ['order','system','user']

export const hasPermisson: Directive = {
  mounted(el, binding) {
    const { value } = binding
    const handler = (event: any) => { 
      // 如果沒有權限
      if(!hasCodes.includes(value)){
        // 停止事件傳播
        event.stopPropagation()
        alert('無該權限，請去開通')
      }
    }
    el.__hasPermissonHandler = handler
    // 捕獲階段執行
    el.addEventListener('click', handler, true)
  },
  unmounted(el) {
    const handler = el.__hasPermissonHandler
    if (handler) {
      el.removeEventListener('click', handler)
      delete el.__hasPermissonHandler
    }
  },
}

export const vHasPermisson: Directive = hasPermisson

注冊指令：

//main.ts
import { createApp } from "vue";
import { hasService } from "@/directives/hasService";
const app = createApp(App);
app.directive("has", hasService);

使用示例：

// 模板文件
<template>
    <div @click="orderHandle" v-has="'order'">提交訂單</div>
</template>

這時候，如果點擊提交訂單，那么會先檢查權限:
如果沒有order模塊權限，那么就停止當前事件的繼續傳播,自然就攔截掉了 orderHandle（這個默認冒泡階段才執行的處理函數） 如果有order模塊權限，什么都不做。

擴展-事件委托-性能優化

**利用事件冒泡和事件委托機制可以實現性能優化： **

事件委托（Event Delegation）是指將事件的處理程序綁定到父元素上（基于事件冒泡原理），通過判斷事件的原始目標（event.target）來決定是否執行相應的操作。不需要為子元素單獨綁定事件處理程序，而是直接通過父元素來處理事件，這樣可以減少事件綁定的數量、提高性能

<div id="app"></div>

委托示例代碼：

<template>
  <div @click="parentHandle" style="text-align:center">
    <div v-for="item in list" :data-id="item">{{item}}</div>
  </div>
 <div>{{tip}}</div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const list = ref([1,2,3,4,5,6,7,8,9,10]);
    const tip = ref('')
    const parentHandle = (event) => {
      let id = event.target.dataset.id
      id && (tip.value = `點擊了id:${id}`)
    }
    return { list, parentHandle, tip };
  },
});
</script>

總結

通過addEventListener函數的第三個參數useCaptreue設置為true即可讓事件處理函數優先執行。
日后有類似這種需要調整事件處理程序觸發順序需求的時候就知道解決方案了。

利用冒泡機制的事件委托方式還可實現性能優化，其通過將事件處理程序綁定到祖先元素，減少事件處理程序數量和內存占用，如在列表中可將點擊處理程序綁定到列表元素來處理列表項的點擊。

至此，一個對原點擊事件處理函數無侵入性的點擊權限指令就開發完成了。