如何为表格单元格的内部 html 创建 OnClick 事件

Question

我想使用 JavaScript 使表格单元格中的文本触发 onclick 函数。我能够让单元格本身触发 onClick 事件，但这不是我想要的。var table = document.getElementById(tableName);var row = table.insertRow(0);var cell1 = row.insertCell(0);cell1.innerHTML = "some text"//how do I make the text within the innerHTML trigger an onclick event?

Answer 1

表格单元格内的实际文本不能绑定到这样的事件侦听器。如果表格单元格中的文本在另一个标签中（例如段落、跨度、div 或其他），那么您可以使用一个小技巧通过比较事件target和事件currentTarget属性来测试哪个元素触发了事件。

您可以单击单元格中的任意位置，除非您单击该段落，否则不会发生任何事情 - 此时target它将不再currentTarget与事件侦听器中注册的相同。据我所知，仅使用表格单元格中的原始文本无法做到这一点 - 最终你为什么需要这样做？

<table id='banana' border=1 cellpadding='5px' cellspacing='2px'>

    <!-- content to follow -->

</table>

<script>

    const nl=String.fromCharCode(10);

    var id='banana';

    var table = document.getElementById( id );

    var row = table.insertRow(0);

    var cell = row.insertCell(0);

        cell.innerHTML = 'This is some basic text';

    var p=document.createElement('p');

        p.innerText='This is a Paragraph within the table cell';

        cell.appendChild( p )

    cell.addEventListener( 'click', function(e){

        if( e.target != e.currentTarget ) alert( [ 'target: '+e.target, 'currentTarget: '+e.currentTarget, 'text: '+e.target.innerText ].join( nl ) )

    });

</script>

继之前关于在用户选择表格单元格中的文本时触发事件的评论之后，您可以尝试以下操作：

document.body.addEventListener('mouseup',(e)=>{

    alert( 'Text has been selected? '+ window.getSelection() )

});

正如我刚刚发现的那样，有一个selectionchange事件可能会引起人们的兴趣 - MDN 提供的更多信息

Answer 2

将事件侦听器添加到cell1.

cell1.addEventListener("click", function() {

    console.log(this.innerText);

})

Answer 3

对 onClick 事件使用 onclick

cell1.onclick = function () 

{

   console.log("onclick");

};

var table = document.getElementById("table");

var row = table.insertRow(0);

var cell1 = row.insertCell(0);

cell1.innerHTML = "some text"

cell1.onclick = function () 

{

   console.log("onclick");

};

<table id="table">

 </table>