從鏈接傳遞參數給JS功能的onclick

Question

我有一個鏈接，看起來像這樣：

<a id="mylink" onclick="deleteHike(3);" href="javascript:void(0);">Yes</a> 

它可以調用這個JavaScript：

window.onload = function() 
{ 

    //Get a reference to the link on the page 
    // with an id of "mylink" 
    var a = document.getElementById("mylink"); 

    //Set code to run when the link is clicked 
    // by assigning a function to "onclick" 
    a.onclick = function(hike_id) 
    { 
    // Somecode her 
    // But when I try to use the hike_id it displays as [object MouseEvent] 
    } 
} 

惟獨在是值[對象MouseEvent]，而不是我期待的數字。任何想法爲什麼發生這種情況，以及如何解決這個問題:)

謝謝！

Answer 1

您試圖以兩種不同且衝突的方式將函數分配給您的鏈接。

使用eval-ed函數字符串onclick = "function(value)"可以使用，但不建議使用。

在onload事件中綁定點擊處理程序的另一種方式也起作用，但是如果您希望傳遞特定值，則必須稍微更改腳本，因爲初始onclick中給出的值是當您將onclick設置爲新功能時完全丟失。

爲了使您當前的方法有效，根本不需要onload處理程序。你只需要這樣：

function deleteHike(hike_id) { 
    // Some code here 
} 

要做到這一點的第二種方式，我建議，它應該是這樣的：

<a id="mylink" href="javascript:void(0);">Yes</a> 

這個腳本：

function deleteHike(e, hike_id) { 
    // Some code here 
    // e refers to the event object which you can do nifty things with like 
    // - learn the actual clicked element if it was a parent or child of the `this` element 
    // - stop the event from bubbling up to parent items 
    // - stop the event from being captured by child items 
    // (I may have these last two switched) 
} 

function getCall(fn, param) { 
    return function(e) { 
     e = e || window.event; 
     e.preventDefault(); // this might let you use real URLs instead of void(0) 
     fn(e, param); 
    }; 
} 

window.onload = function() { 
    var a = document.getElementById("mylink"); 
    a.onclick = getCall(deleteHike, 3); 
}; 

的參數DOM事件函數是事件對象（在Firefox和其他符合標準的瀏覽器中）。這在IE中是沒有的（因此也需要獲取window.event）。我爲你添加了一個輔助函數，在你的參數值周圍創建一個閉包。你可以每次都做到這一點，但這會很痛苦。最重要的部分是getCall是一個函數，返回一個函數，它是這個返回的函數，當你點擊元素時被調用。

最後，我強烈建議您不要使用所有這些，而應使用像jQuery這樣的庫，因爲它可以爲您解決各種問題，而且您不必知道瘋狂的JavaScript需要很多專業知識才能恰到好處，問題，如：

• 擁有多個處理器的單個事件
• 與模擬事件ready的onload事件觸發之前儘快運行的JavaScript。例如，也許一個圖像仍在下載，但您希望在用戶嘗試使用該頁面之前將注意力放在一個控件上，您無法用onload這樣做，並且它是一個真的難以解決跨瀏覽器的問題。
• 處理傳遞事件對象的方式
• 找出瀏覽器處理事件傳播和獲取點擊項目等所有不同方式。

注意：在您的點擊處理程序中，您可以使用this事件，該事件將包含點擊元素。這對你來說可能非常強大，因爲不必編碼每個元素的onclick事件的JavaScript中的哪個項目，只需將相同的處理程序綁定到所有項目並從元素中獲取其值即可。這樣更好，因爲它可以讓你只在元素中編碼關於元素的信息，而不是在元素和的JavaScript中。

Answer 2

javascript事件中的第一個參數是事件本身。如果您需要參考回「a」標籤，則可以使用此變量，因爲範圍現在是「a」標籤。

Answer 3

你就應該能夠宣佈這樣的功能（無需在window.onload分配）：

function deleteHike(hike_id) 
{ 
    // Somecode her 
    // But when I try to use the hike_id it displays as [object MouseEvent] 
} 

Answer 4

當你將一個函數來一次這樣的活動DOM元素上，瀏覽器會自動將作爲第一個參數傳遞事件對象（在本例中爲MouseEvent，因爲它是一個onclick事件）。

嘗試像這樣，

a.onclick = function(e, hike_id) { } 

Answer 5

這裏是我來解決這個問題，新的最喜歡的方式。我喜歡這種方法，因爲它的清晰和簡潔。

使用此HTML：

<a onclick="deleteHike(event);" hike_id=1>Yes 1</a><br/> 
<a onclick="deleteHike(event);" hike_id=2>Yes 2</a><br/> 
<a onclick="deleteHike(event);" hike_id=3>Yes 3</a><br/> 

有了這個JavaScript：

function deleteHike(event) { 
    var element = event.target; 
    var hike_id = element.getAttribute("hike_id"); 
    // do what you will with hike_id 
    if (confirm("Delete hike " + hike_id + "?")) { 
     // do the delete 
     console.log("item " + hike_id + " deleted"); 
    } else { 
     // don't do the delete 
     console.log("user canceled"); 
    } 
    return; 
} 

此代碼的工作，因爲event在JavaScript環境定義爲當onclick處理程序被調用。

有關更完整的討論（包括爲什麼您可能希望使用「data-hike_id」而不是「hike_id」作爲元素屬性），請參閱：How to store arbitrary data for some HTML tags。

這些都是具有相同效果的HTML的替代形式：

<a onclick="deleteHike(event);" hike_id=4 href="javascript:void(0);">Yes 4</a><br/> 
<button onclick="deleteHike(event);" hike_id=5>Yes 5</button><br/> 
<span onclick="deleteHike(event);" hike_id=6>Yes 6</span><br/>