如何使用Greasemonkey檢測頁面中特定鏈接的點擊？

Question

好的...我的一個虛擬寵物站點已關閉，所以我決定為另一個站點調整Greasemonkey腳本...當您找到一個雞蛋時，原始腳本會彈出一個警報，因此您不要單擊它-我想計算我遇到的雞蛋數量很簡單。 2小時后，我終於找到了一種方法來保持頁面重新加載后的變量-成功！ 然后，我決定要跟蹤我正在執行的“步驟” ... ARGGGG !!!! 應該很簡單，但事實並非如此！
在頁面上，有三個可能的瀏覽鏈接可供單擊（顯示圖像而不是鏈接）。 3小時后，我找到了事件偵聽器，當我單擊頁面上的任意位置時可以彈出警報，但是如何僅檢查這3個鏈接中的1個單擊？ 所有3個鏈接的通用格式都相同： http://unicreatures.com/explore.php?area=***&id=***&key=**** : http://unicreatures.com/explore.php?area=***&id=***&key=**** * id= * & 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語句的方式是在前兩個觸發器中的任何一個觸發時都會得到雙重警報（我沒有編寫該部分，只是使警報具有唯一性）...現在我可以了。 我確實讀過一些有關獲取元素ID的信息，但找不到適合我“獲取”的地方。
請只使用javascript，不要使用jquery ...目前我仍然幾乎沒有使用javascript ...請解釋答案，以便我了解某些工作原理-我不只是想要讓我回想起類似問題的代碼段，因為我不明白為什么要使用一些代碼。

還有一個問題，除非我要再開一個問題...當您找到一個雞蛋時，文字會顯示You find an Exalted *** egg nearby或者You find a *** egg nearby 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/是一個正則表達式 ，用於匹配包含“ area = grassland”作為子字符串的字符串。 （如果需要，您可以對regexp進行更多處理 。）我們針對頁面上的每個鏈接（ a元素）對其進行測試，並將點擊處理程序添加到href屬性與regexp匹配的對象。

如果需要，您可以根據需要在具有link.textContent的鏈接中獲取文本。 不過，它與圖像鏈接的配合效果不佳。 （但是，您始終可以使用link.getElementsByTagName( 'img' )[0]找到鏈接中的第一個圖像標簽， 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] );
    }
}

請參閱我在上面給出的鏈接，了解該正則表達式如何工作以及如何對其進行修改以更好地滿足您的需求。

（警告：我實際上並沒有測試上面的任何代碼，因為我不想為此而在游戲網站上創建一個試用帳戶。我希望它是正確的，但是其中可能存在錯誤或錯別字。 ）