JavaScript 获取每个单词的事件

Posted 2023-03-04

【中文标题】JavaScript 获取每个单词的事件

【英文标题】：JavaScript get event on every word

【发布时间】：2011-08-20 20:57:25

【问题描述】：

通常 javascript 在 DOM 元素上绑定事件。但我想知道用户点击了哪个词。对我来说熟悉的方式就是像这里一样包装每个单词：

<a href="javascript:onClick()">And</a> <a href="javascript:onClick()">now</a> <a href="javascript:onClick()">the</a>
<a href="javascript:onClick()">kung</a> <a href="javascript:onClick()">pao</a> <a href="javascript:onClick()">chicken</a>.

我觉得是多余的代码，有没有可能让代码更简洁？谢谢

【参考方案1】：

要以任何可行的方式做到这一点，您可能仍然需要像现在这样将每个单词包装在一个单独的元素中，但您至少可以摆脱所有内联 JavaScript。

将您的均匀监听器添加到单词的父元素。单词元素接收到的任何事件都会冒泡到父元素，您可以查看事件目标属性以找出单击了哪个单词。

您是在使用 JS 库还是在没有库的情况下工作？

编辑：由于您没有使用库，jQuery 是一个流行的选择（流行到足以被视为 SO 的陈词滥调，我想这说明了一些事情）。以下是使用 jQuery 的方法：

http://jsfiddle.net/eKvdn/（点击文字）

不过，在使用它之前阅读更多关于它的信息是一个非常好的主意。

【讨论】：

我不知道哪个 JS 库可以帮助我解决这个问题。如果有人找到图书馆来解决这个问题，我将不胜感激。

【参考方案2】：

好吧，您总是可以编写一个 JavaScript 函数来为您包装每个单词：

function wrapWords(element) 
    var html = element.innerHTML;
    var words = html.split(/ /);
    var newHtml = '';

    for (var i = 0; i < words.length; i++) 
        newHtml += '<span>' + words[i] + '</span> ';
    

    element.innerHTML = newHtml; 

当然，这假设元素中没有其他 html。您可以将此与 Matti 的建议结合起来，让代码更整洁。