如何使用 Greasemonkey 检测页面中特定链接的点击？

Question

好的...我的一个虚拟宠物网站已关闭，所以我决定为另一个网站调整 Greasemonkey 脚本...当您找到一个鸡蛋时，原始脚本只会弹出一个警报，这样您就不会点击它- 我认为计算我遇到了多少鸡蛋会很简单。 2 小时后，我终于找到了一种方法来保持过去页面重新加载的变量 - 成功！然后我决定我要跟踪我走了多少“步骤”...... ARGGGG！！！！应该很简单，但事实并非如此！
在页面上有三个可能的探索链接可供单击（显示图像而不是链接）。 3 小时后，我找到了事件侦听器，当我单击页面上的任何位置时，可以弹出警报，但是如何仅检查这 3 个链接中的 1 个的点击？所有 3 个链接都具有相同的一般格式：http://unicreatures.com/explore.php?area=***&id=***&key=**** 其中* 是可变的。

目标页面http://unicreatures.com/explore.php?area=grassland 应该可以在没有帐户的情况下访问，如果没有，请告诉我，我会获取源代码。

// ==UserScript==
// @name Unicreatures Egg pop-up
// @namespace Unicreatures Egg pop-up
// @description Unicreatures Egg pop-up
// @include http://unicreatures.com/explore.php*
// @include http://www.unicreatures.com/explore.php*
// ==/UserScript==

var y = document.body.innerHTML;

//document.addEventListener('click', function(){alert('page clicked')}, true);

if(y.indexOf("You find a Noble")> 0)
{
alert('Noble Egg Alert');
}

if(y.indexOf("You find an Exalted")> 0)
{
localStorage.exaltedEggCount=Number(localStorage.exaltedEggCount)+1;
alert('Exalted Egg Alert '+localStorage.exaltedEggCount);
}

if(y.indexOf("egg nearby!")> 0)
{
localStorage.eggCount=Number(localStorage.eggCount)+1;

alert('Egg Alert '+localStorage.eggCount);
}

我确实意识到 if 语句的编写方式是，如果前 2 个触发器中的任何一个触发器（我没有写那部分，只是使警报唯一），我都会收到双重警报......我很好目前。我确实阅读了有关获取元素 ID 或其他内容的内容，但我找不到任何足以让我“获取”的内容。
请仅使用javascript，不要使用jquery ...我目前仍然几乎没有使用javascript ...请解释答案，以便我了解某些工作原理-我不只是想要让我以类似的方式回来的代码sn-ps问题，因为我不明白为什么要使用一些代码。

还有一个问题，除非我应该为它打开另一个问题......当你找到一个鸡蛋时，文字会显示You find an Exalted *** egg nearby 或You find a *** egg nearby。有没有办法从页面中获取*** 部分？

谢谢！

Answer 1

您可以将事件处理程序添加到页面上的特定元素。如果元素有id 属性，这很简单：

var element = document.getElementById( 'whatever' );

element.addEventListener( 'click', function () {
    alert( 'element clicked' );
}, true );

这会将事件侦听器添加到 ID 为“whatever”的元素。

如果元素没有 ID 属性，则您需要更有创意。这是一种方法：

var links = document.getElementsByTagName( 'a' );

for ( var i = 0; i < links.length; i++ ) {
    var link = links[i];
    if ( /area=grassland/.test( link.href ) ) {
        link.addEventListener( 'click', function () {
             alert( 'grassland link clicked' );
        }, true );
    }
}

/area=grassland/ 是一个regexp，它匹配包含“area=grassland”作为子字符串的字符串。 （如果你愿意，你可以do a lot more with regexps。）我们针对页面上的每个链接（a 元素）对其进行测试，并将点击处理程序添加到href 属性与正则表达式匹配的那些。

如果您希望与之匹配，您可以根据需要获取带有link.textContent 的链接中的文本。但是，它不适用于图像链接。 （但你总能找到，比如说，link.getElementsByTagName( 'img' )[0] 链接中的第一个图像标签，然后从那里开始工作。）

---

至于你的第二个问题，正则表达式也是你的朋友：

var regexp = /You find an? (Exalted )?(.*?) egg nearby/;
var match = regexp.exec( document.body.textContent );
if ( match ) {
    if ( match[1] ) {
        alert( "Exalted egg found: " + match[2] );
    } else {
        alert( "Normal egg found: " + match[2] );
    }
}

请参阅我上面提供的链接，了解该正则表达式的工作原理以及如何修改它以更好地满足您的需求。

(Ps. 警告：我实际上并没有测试上面的任何代码，因为我不想为此在游戏网站上创建一个试用帐户。我希望它是正确的，但可能存在错误或有错别字。）