如何在Tampermonkey中实现任意指定类名按钮点击触发事件

静态加载的按钮（页面加载完成后就存在） #

直接获取按钮集合，转成数组后循环绑定点击事件即可：

// ==UserScript==
// @name         按钮点击绑定脚本
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  给指定class的按钮绑定统一点击逻辑
// @author       你自己的名字
// @match        https://你的目标页面域名/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 定义点击后要执行的函数
    function onButtonClick() {
        // 这里写你的业务逻辑，比如：
        alert("按钮被点击啦");
        console.log("执行点击操作");
    }

    // 获取目标按钮集合
    const targetButtons = document.getElementsByClassName("你的按钮class名");
    // 把HTMLCollection转为数组，方便遍历
    const buttonList = Array.from(targetButtons);

    // 逐个绑定点击事件
    buttonList.forEach(btn => {
        btn.addEventListener('click', onButtonClick);
    });
})();

动态加载的按钮（页面后续异步加载出来） #

如果按钮是滚动加载、AJAX请求后才出现的，用MutationObserver监听DOM变化，自动给新出现的按钮绑定事件：

// ==UserScript==
// @name         动态按钮点击绑定脚本
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  给动态生成的指定class按钮绑定点击逻辑
// @author       你自己的名字
// @match        https://你的目标页面域名/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function onButtonClick() {
        console.log("动态按钮被触发");
        // 你的业务逻辑...
    }

    // 批量绑定事件的函数
    function bindClickEvents() {
        const buttons = document.getElementsByClassName("你的按钮class名");
        Array.from(buttons).forEach(btn => {
            // 先移除再绑定，避免重复触发
            btn.removeEventListener('click', onButtonClick);
            btn.addEventListener('click', onButtonClick);
        });
    }

    // 页面加载完成后先绑定一次已有按钮
    bindClickEvents();

    // 监听DOM变化，自动处理新添加的按钮
    const domObserver = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            // 如果有新节点被添加到DOM，重新绑定事件
            if (mutation.addedNodes.length > 0) {
                bindClickEvents();
            }
        });
    });

    // 配置监听范围：监听body下所有子节点变化
    domObserver.observe(document.body, {
        childList: true,
        subtree: true
    });
})();

注意事项 #

• 把代码里的你的按钮class名替换成实际的按钮类名，比如action-btn
• 把https://你的目标页面域名/*替换成脚本需要运行的页面地址，支持通配符
• 静态按钮用第一个方案更高效，动态按钮必须用第二个方案才能覆盖所有按钮
• 加入removeEventListener是为了防止DOM更新时重复绑定事件，避免同一按钮点击多次触发函数

内容的提问来源于stack exchange，提问作者Recoded