Question

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

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

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

但是，按钮无法按预期工作。每个按钮都应显示一个简单的javascript警报，每个按钮都使用不同的方法。

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

问题2：除“警报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();
});

这是我的完整篡改程序脚本：

// ==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移动到setTimeout的{{1}}函数，因为滚动列表是在文档之后异步加载的。

$(document).ready()

我不知道为什么，但我不得不用$(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>，我会针对这个具体问题提出另一个问题，以找出这是正常的还是一个html错误。

并且<div>根本不起作用，我必须在产生按钮后直接定义脚本以使其工作：

AlertC()

Tampermonkey - 无法在按钮上调用自己的功能

1 个答案: