如何为表格单元格的内部 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'>&nbsp; &nbsp; <!-- content to follow --></table><script>&nbsp; &nbsp; const nl=String.fromCharCode(10);&nbsp; &nbsp; var id='banana';&nbsp; &nbsp; var table = document.getElementById( id );&nbsp; &nbsp; var row = table.insertRow(0);&nbsp; &nbsp; var cell = row.insertCell(0);&nbsp; &nbsp; &nbsp; &nbsp; cell.innerHTML = 'This is some basic text';&nbsp; &nbsp; var p=document.createElement('p');&nbsp; &nbsp; &nbsp; &nbsp; p.innerText='This is a Paragraph within the table cell';&nbsp; &nbsp; &nbsp; &nbsp; cell.appendChild( p )&nbsp; &nbsp; cell.addEventListener( 'click', function(e){&nbsp; &nbsp; &nbsp; &nbsp; if( e.target != e.currentTarget ) alert( [ 'target: '+e.target, 'currentTarget: '+e.currentTarget, 'text: '+e.target.innerText ].join( nl ) )&nbsp; &nbsp; });</script>继之前关于在用户选择表格单元格中的文本时触发事件的评论之后，您可以尝试以下操作：document.body.addEventListener('mouseup',(e)=>{&nbsp; &nbsp; alert( 'Text has been selected? '+ window.getSelection() )});正如我刚刚发现的那样，有一个selectionchange事件可能会引起人们的兴趣 - MDN 提供的更多信息

Answer 2

将事件侦听器添加到cell1.cell1.addEventListener("click", function() {&nbsp; &nbsp; console.log(this.innerText);})

Answer 3

对 onClick 事件使用 onclickcell1.onclick = function ()&nbsp;{&nbsp; &nbsp;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 ()&nbsp;{&nbsp; &nbsp;console.log("onclick");};<table id="table">&nbsp;</table>