Tampermonkey - 无法在按钮 onclick 中调用自己的函数

Question

我尝试为Unity Documentation 编写一个测试脚本。 基本上我尝试添加一个带有一些测试控件（警报 A、B、C 和关闭按钮）的 div。

如果用户权限单击左侧滚动列表中的链接元素，则不应显示默认上下文菜单，而是应生成我的 div。

我已经解决了这个问题。右击“Scriptable render pipeline”链接后生成了以下屏幕截图中的框。

但是，按钮无法按预期工作。每个按钮都应该显示一个简单的 javascript 警报，并且每个按钮都使用不同的方法来做到这一点。

---

问题 1：如果我第一次按下 div 中的警报按钮，则列表总是会再次滚动到顶部并且不会执行该功能。如果我按下X（关闭按钮），它不会滚动到顶部。

问题 2： 除了“Alert B”之外，其他按钮都不起作用。 更新：我今天再次尝试，没有更改代码中的任何内容，现在“警报 A”正在产生？！但有时它不会产生，我必须等待一段时间才能点击，似乎需要一些时间来初始化？

---

警报 A

更新：我今天又试了一次，没有更改代码中的任何内容，现在“警报 A”的生成非常好？！

这个方法根本不起作用，什么也没有发生，也没有警告或错误。

<button id="A" class="A"> AlertA </button>

...

$("div.mCSB_container").delegate("#A", "click", function() {
    alert("Hello from Alert A");
});

警报 B（有效）

此警报有效，但也仅在第二次点击后，它会在每次点击时将列表滚动到顶部，原因不明。

<button id="B" onclick="alert('Hello from B')"> AlertB </button>

警报 C

我收到Uncaught ReferenceError: AlertC is not defined。

<button id="C" onclick="AlertC()"> AlertC </button>

...

function AlertC()
{
    alert("Hello from C");
}

关闭按钮

这个方法根本不起作用，什么也没有发生，也没有警告或错误。

$(".confirmBoxClose").on("click", function(e) {
    alert("Removing this box");
    $(".confirmBox").remove();
});

这是我完整的 Tampermonkey 脚本：

// ==UserScript==
// @name         Unity Documentation
// @namespace    https://docs.unity3d.com
// @version      1.0
// @description  test
// @author       Edward Black
// @match        *://docs.unity3d.com/*
// @grant        GM_addStyle
// ==/UserScript==

GM_addStyle('.confirmBox { z-index: 100; width: 275px; background-color: greenyellow; border: 1px solid black; }');
GM_addStyle('.confirmBoxButtons { margin-top: 5px; }');
GM_addStyle('.confirmBoxClose { position: absolute; height: 20px; width: 20px; background-color: white; color:black; border: 0.5px solid black; text-align: center; right: 0px; }');
GM_addStyle('.confirmBoxClose:hover { background-color: black; color:white; cursor: pointer; }');

$(document).ready(function() {

    setTimeout(function() {
        run();
    }, 4000);

});

function run()
{
        $("div.mCSB_container").find("a").each(function(j, obj) {

            $(obj).on("contextmenu", function(){
                return false;
            });

                $(obj).on("mousedown", function(e){
                    if( e.button == 2 ) {

                        console.log('Right mouse button!');
                        showConfirmBox(this);

                        return false;
                    }
                    return true;
                });
        });
}

function showConfirmBox(container)
{
    $(".confirmBox").remove();

    var elm = '<li><div class="confirmBox">'+
                  '<div class="confirmBoxClose">x</div>' +

                  '<div class="confirmBoxButtons">' +
                      '<button id="A"> AlertA </button>' +
                      '<button id="B" onclick="alert(\'Hello from B\')"> AlertB (works) </button>' +
                      '<button id="C" onclick="AlertC()"> AlertC </button>' +
                  '</div>' +
              '</div></li>';

    $parent = $(container).parent();
    $(elm).appendTo($parent);
}

$("div.mCSB_container").delegate("#A", "click", function() {
    alert("Hello from A");
});

function AlertC()
{
    alert("Hello from C");
}

$("div.mCSB_container").delegate(".confirmBoxClose", "click", function() {
    $(".confirmBox").remove();
});

B 是唯一有效的方法，但我需要调用一个函数，因为我尝试在单击按钮后运行更多代码。

问题：

• 为什么单击按钮后列表总是滚动到顶部？

• 为什么如果我按下X（关闭按钮），它也不会滚动到顶部？

• 为什么只有“警报 C”有效？

Answer 1

我找到了为什么不总是检测到单击按钮的原因。我不得不将 EventListeners 移动到 $(document).ready() 的 setTimeout 函数，因为滚动列表是在文档之后异步加载的。

$(document).ready(function() {

    setTimeout(function() {
        run();
        $("div.mCSB_container").delegate("#A", "click", function() {
            alert("Hello from A");
        });
        $("div.mCSB_container").delegate(".confirmBoxClose", "click", function() {
            $(".confirmBox").remove();
        });
    }, 4000);
});

我不知道为什么，但我不得不将<button> 替换为<div>，这解决了单击按钮时列表滚动到顶部的问题，现在我只需按下按钮一次。

var elm = '<li><div class="confirmBox">'+
              '<div class="confirmBoxClose">x</div>' +

              '<div class="confirmBoxButtons">' +
                  '<div id="A"> AlertA </div>' +
                  '<div id="B" onclick="alert(\'Hello from B\')"> AlertB (works) </div>' +
                  '<div id="C" onclick="AlertC()"> AlertC </div>' +
              '</div>' +
          '</div></li>';

我完全不确定为什么这只会发生在<button> 而不是<div>，我会针对这个特定问题提出另一个问题，以确定这是正常的还是 html 错误。

而AlertC()根本不起作用，我必须在生成按钮后直接定义脚本才能使其起作用：

...

'<div id="C" class="confirmBoxBtn" onclick="AlertC()"> AlertC </div>' +
'<script>function AlertC() { alert("Hello from C"); }</script>' +

...