檢測鏈接ID onClick

Question

所以我有一個4x3矩陣，其中紅色或藍色正方形是鏈接。 當我單擊鏈接時，我想獲取鏈接的ID，但是，在第63行出現此錯誤：TypeError：表達式'targ'[undefined]的結果不是對象。 我正在使用基於http://www.quirksmode.org/js/events_properties.html#target的代碼

這是一個實時示例： 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>

Answer 1

您正在this明確傳遞給onclick屬性中的事件處理程序調用。 因此，我不認為current(e)函數中的e參數引用事件對象：您確保它引用的是clicked元素本身。

由於e引用元素而不是事件對象，因此未定義target屬性，這就是您收到錯誤的原因。

幸運的是，如果你通過this來current()獲取ID現在是非常簡單的：內部current()函數， e.getAttribute("id")甚至e.id將讓你的ID。

Answer 2

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

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

Answer 3

這里有一些問題，但是您眼前一個問題的答案是，您可以將元素完美地傳遞到事件處理程序中，而無需涉及事件對象。 您可以如下更改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 。

檢測鏈接ID onClick

問題描述

3 個解決方案

解決方案1
0 2010-01-03 22:13:04

解決方案2
0 2010-01-03 22:13:15

解決方案3
0 已采納 2010-01-03 22:13:32

檢測鏈接ID onClick

問題描述

3 個解決方案

解決方案1 0 2010-01-03 22:13:04

解決方案2 0 2010-01-03 22:13:15

解決方案3 0 已采納 2010-01-03 22:13:32

解決方案1
0 2010-01-03 22:13:04

解決方案2
0 2010-01-03 22:13:15

解決方案3
0 已采納 2010-01-03 22:13:32