如何使点击事件仅在名称上有效？

Question

我具有此功能，可在其中检索json数据，并单击项目名称之一时，它将展开该项目的描述。 我的html站点之一看起来像：

Racket              $20.50 

在项目名称和成本之间留一个空格。 问题是，如果我专门单击“球拍”一词，它将按预期方式打开说明，但是如果我单击球拍上字母“ t”的末尾与成本“ 0”中最后一个数字之间的任意位置，它根本不会打开任何东西。

有没有一种方法可以使click函数忽略最后一个字母之后的所有内容，或者即使click函数作为最后的手段在整行上都起作用，因为此时，单击字母“ t”之后我的页面空白（删除项目名称，并且不显示任何说明）。

谢谢！任何帮助表示赞赏！

htmlEl.addEventListener('click', function(event) {
  $("#pro").empty();
  console.log(event.target.textContent);
  for (var i = 0; i < prod.length; i++) {
    if (prod[i].name == event.target.textContent) {

Answer 1

您可以围绕“竞争”创建一个元素。例如。

<span id="racketClick">Racket</span> 

，然后在该元素上添加事件监听器

document.findElementById("racketClick").addEventListener('click', function(event) {...});