javascript 和浏览器中的 td 元素事件属性

Question

我无法使用 JQuery。
尝试在 td 元素上设置事件监听器，这样如果用户单击它，它将读取 td 中的文本并在相同的 table 行中查找重复项。例如 ABC 重复。

<tr><td onclick='foo()'>ABC</td><td>7</td></tr>
<tr><td onclick='foo()'>DEF</td><td>8</td></tr>
<tr><td onclick='foo()'>HIJ</td><td>9</td></tr>
<tr><td onclick='foo()'>ABC</td><td>10</td></tr>

有人说我不能在td标签上使用onclick方法，所以我就这样做了。

<tr><td><span onclick='foo()'>XYZ</span></td><td>2</td></tr>

事件函数如下：

function foo(e) {  
          alert('hi');
          alert(e.target);
//        alert(window.Event.target.innerHTML);          
//        alert(event.target.text);  
//        alert(event.target.tagName);  
//        alert(event.target.textContent);                
//        alert(event.target.parentElement.tagName);
//        alert(event.target.innerHTML);

我首先注意到的是Firefox、IE，甚至不启动事件代码方法和属性。他们只是运行直到高度警惕。但是其余的代码没有被执行。

Chrome，另一方面，可以运行事件代码。我可以使用 alert(event.target.innerHTML); 成功获取 innerHtml

如何在 Firefox 和 IE 浏览器中实现运行。

Answer 1

您必须将 event 作为参数传递给您的 foo 函数：

    <tr><td onclick='foo(event)'>ABC</td><td>7</td></tr>
    <tr><td onclick='foo(event)'>DEF</td><td>8</td></tr>
    <tr><td onclick='foo(event)'>HIJ</td><td>9</td></tr>
    <tr><td onclick='foo(event)'>ABC</td><td>10</td></tr>

那你就可以打电话了。但是您还必须检查在 IE 浏览器中可能具有不同名称的目标：

var target = e.target || e.srcElement;

这里是Working Fiddle

Answer 2

您正在执行一个没有参数的函数。所以 "e" 将是未定义的。

<tr><td><span onclick='foo(this)'>XYZ</span></td><td>2</td></tr>

现在您可以使用代表 Dom 元素的 e。

这篇 link 可能会对您有所帮助： what's "this" in javascript onclick?

干杯，瓦伦丁

Answer 3

我在 Firefox、Explorer 和 Chrome 中对此进行了测试，并按预期工作：

<table>
<tr><td onclick='foo(this)'>ABC</td><td>7</td></tr>
<tr><td onclick='foo(this)'>DEF</td><td>8</td></tr>
<tr><td onclick='foo(this)'>HIJ</td><td>9</td></tr>
<tr><td onclick='foo(this)'>ABC</td><td>10</td></tr>
</table>

<script>
function foo(element){
    var myContent = element.innerHTML;
    var trElementsInTable = element.parentElement.parentElement.children;
    var numberOfOcurrences = 0;
    for (i=0;i<trElementsInTable.length;i++){
        if (trElementsInTable[i].children[0].innerHTML == myContent) numberOfOcurrences++
    }
    if (numberOfOcurrences > 1){
        alert("I've found " + numberOfOcurrences + " ocurrences of content " + myContent);
    }
    else{
        alert("Ok I am not repeated");
    }
}
</script>

希望对您有所帮助

javascript 和浏览器中的 td 元素事件属性

javascript and td element events properties in browsers

html

javascript

html-table

event-handling