檢測鏈接ID onClick

所以我有一個4×3的矩陣，紅色或藍色方塊是鏈接。當我點擊鏈接時，我想獲取鏈接的ID，但是，我在第63行得到這個錯誤：TypeError：表達式結果'targ'[undefined]不是一個對象。我使用基於此http://www.quirksmode.org/js/events_properties.html#target 檢測鏈接ID onClick

繼承人活生生的例子代碼：https://dl.dropbox.com/u/750932/iPhone/risk.html

<!DOCTYPE html> 
<html> 
<head> 
<title>RISK</title> 
<style type="text/css" media="screen"> 
    a:link, a:visited {color: #eee;border:3px solid #ccc;display:inline-block;margin:3px;text-decoration:none;padding:26px;} 
    .blank {background:#fff;} 
    .one {background: #7B3B3B;} 
    .two {background: #547980;} 
    #status {color: #eee;padding:1px;text-align:center} 
    #error {background:#FFD41F;} 
    .current {border:3px solid #000;} 
    p {margin:0 0 15px;padding:0;} 
    input {height:40px;width:90px;} 
</style> 
<script type="text/javascript" charset="utf-8"> 
var playerOne = true; 
var gameOver = false; 

function newGame() 
{ 
    var status = document.getElementById('status'); 
    var one = 0; 
    var two = 0; 
    gameOver = false; 
    playerOne = true; 
    status.innerHTML = 'Player One\'s turn'; 
    status.setAttribute('class', 'one'); 

    var board = [1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2]; 

    // shuffle the array 
    for(var j, x, i = board.length; i; j = parseInt(Math.random() * i), 
     x = board[--i], board[i] = board[j], board[j] = x); 

    var row = -1; 
    for (var i = 0; i < board.length; i++) { 
     var cssClass = board[i] == 1 ? 'one' : 'two'; 
     var col = i % 4; 
     if (col == 0) row++; 
     document.getElementById('a' + col + '_' + row).setAttribute('class', cssClass); 
    } 

    for(var x = 0; x < 4; x++) 
    { 
     for(var y = 0; y < 3; y++) 
     { 
      document.getElementById('a' + x + '_' + y).innerHTML = Math.floor(Math.random()*5 + 1); 
     } 
    } 
} 
function current(e) 
{ 
    var value = e.innerHTML; 
    var cssClass = e.getAttribute('class'); 
    var targ; 
    if (!e) 
     var e = window.event; 
    if (e.target) 
     targ = e.target; 
    else if (e.srcElement) 
     targ = e.srcElement; 
    if (targ.nodeType == 3) // defeat Safari bug 
     targ = targ.parentNode; 
    var theID = targ.id; 

    if (cssClass == 'one' && playerOne == true) 
    { 
     alert('you choose your square' + theID); 
    } 
    else if (cssClass == 'two' && playerOne == false) 
    { 
     alert('player 2 choose correct square' + theID); 
    } 
    else 
     alert('ERROR: you didnt your square'); 
} 
function nextTurn() 
{ 
    if (playerOne == true) 
     playerOne = false; 
    else 
     playerOne = true; 

    var status = document.getElementById('status'); 

    if (playerOne == true) 
    { 
     status.innerHTML = 'Player One\'s turn'; 
     status.setAttribute('class', 'one box'); 
    } 
    else 
    {  
     status.innerHTML = 'Player Two\'s turn'; 
     status.setAttribute('class', 'two box'); 
    } 
} 
</script> 
<meta name="viewport" content="user-scalable=no, width=device-width" /> 
</head> 

<body onload='newGame();'> 
<p id="status" class="one">Player One's turn</p> 
<a href="#" id="a0_0" class="blank" onclick="current();"></a> 
<a href="#" id="a1_0" class="blank" onclick="current(this);"></a> 
<a href="#" id="a2_0" class="blank" onclick="current(this);"></a> 
<a href="#" id="a3_0" class="blank" onclick="current(this);"></a> 
<br /> 

<a href="#" id="a0_1" class="blank" onclick="current(this);"></a> 
<a href="#" id="a1_1" class="blank" onclick="current(this);"></a> 
<a href="#" id="a2_1" class="blank" onclick="current(this);"></a> 
<a href="#" id="a3_1" class="blank" onclick="current(this);"></a> 
<br /> 

<a href="#" id="a0_2" class="blank" onclick="current(this);"></a> 
<a href="#" id="a1_2" class="blank" onclick="current(this);"></a> 
<a href="#" id="a2_2" class="blank" onclick="current(this);"></a> 
<a href="#" id="a3_2" class="blank" onclick="current(this);"></a> 
<br /><br /> 
<p><input type="button" id="nextTurn" value="End Turn" onclick="nextTurn();" /></p> 
<p><input type="button" id="newgame" value="New Game" onclick="newGame();" /></p> 
</body> 
</html>

來源

2010-01-03 Raptrex

這裏有幾個問題，但你直接問題的答案是，你將一個元素傳遞給你的事件處理程序非常好，並且不需要涉及事件對象。您可以更改current功能如下：

function current(targ) 
{ 
    var value = targ.innerHTML; 
    var cssClass = targ.className; 
    var theID = targ.id; 

    if (cssClass == 'one' && playerOne == true) 
    { 
     alert('you choose your square' + theID); 
    } 
    else if (cssClass == 'two' && playerOne == false) 
    { 
     alert('player 2 choose correct square' + theID); 
    } 
    else 
     alert('ERROR: you didnt your square'); 
}

此外，你應該使用元素的className屬性，而不是getAttribute和setAttribute。

來源

2010-01-03 22:13:32

你傳入this明確到您的事件處理程序在onclick屬性調用。所以我不認爲你的current(e)函數中的e參數引用了事件對象：你確定它引用了被單擊的元素本身。

因爲e引用一個元素，而不是事件對象，所以目標屬性沒有被定義，這就是爲什麼你會得到錯誤。

幸運的是，如果你傳遞this到current()，獲取ID是現在確實簡單：current()函數內部，e.getAttribute("id")甚至e.id將讓你的ID。

來源

2010-01-03 22:13:04

當您將this傳遞到您的onclick處理程序時，您將傳遞HTMLAnchorElement對象，而不是事件對象。無條件使用e = window.event（無if (!e)）。或者，您可以使用e.id來獲取點擊元素的ID。

或者，您可以通過addEventListener註冊事件處理程序（更符合DOM的方式）。所以e參數將成爲事件對象。

來源

2010-01-03 22:13:15

'window.event'是非標準的。你想使用'window.event || arguments [0]'。 – 2010-01-03 23:04:48

檢測鏈接ID onClick

回答

相關問題