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传递给e属性中的事件处理程序调用。所以我认为current(e)函数中的e参数不是指事件对象：你确定它引用了被点击的元素本身。

因为this引用了一个元素而不是事件对象，所以没有定义目标属性，这就是你得到错误的原因。

幸运的是，如果您确实将current()传递给current()，那么获取ID现在非常简单：在e.getAttribute("id")函数内，e.id甚至{{1}}会得到你的身份。

Answer 2

将this传递到onclick处理程序时，传递HTMLAnchorElement对象，而不是事件对象。只需无条件使用e = window.event（不使用if (!e)）。或者您可以使用e.id来获取所点击元素的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 个答案: