Javascript 如何使单击事件仅在名称上处于活动状态？

我有这个函数，在这里我检索json数据，当我单击其中一个项目名称时，它会扩展项目的描述。 我的一个html站点看起来像：

Racket              $20.50 

在项目名称和成本之间留有空格。 问题是，如果我特别单击单词Racket，它会像预期的那样打开描述，但是如果我单击Racket上字母t结尾和cost 0中最后一个数字之间的任何位置，它根本不会打开任何内容

是否有一种方法可以使单击功能忽略最后一个字母后的所有内容，或者即使作为最后手段，单击功能在整行上都起作用，因为此时，在字母t后单击会使我的页面变为空白，从而删除项目名称，并且不会显示任何描述

谢谢！感谢您的帮助

htmlEl.addEventListener'click'，functionevent{ $pro.empty； console.logevent.target.textContent； 对于变量i=0；i你可以在racked周围创建一个元素

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

---

这是什么版本的Java？它看起来非常特别。请添加html代码，以便清楚htmlEl和pro使用了什么

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