Question

通常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>.

我认为这是一个冗余代码，是否可以使代码更简洁？感谢

Answer 1

好吧，你总是可以编写一个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的建议结合起来，使代码更加整洁。

Answer 2

要以任何可行的方式执行此操作，您可能仍然需要将每个单词包装在一个单独的元素中，就像您正在做的那样，但您至少可以删除所有内联JavaScript。

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

您使用的是JS库，还是没有使用JS库？

编辑：由于你没有使用图书馆，jQuery是一个受欢迎的选择（很受欢迎，被认为是SO上的陈词滥调，我想这说了些什么）。以下是使用jQuery的方法：

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

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

Answer 3

您可以使用JavaScript查找并包装锚点或范围中的每个单词，然后将onclick处理程序添加到该单词。请参阅how to get a word under cursor using JavaScript。

JavaScript会在每个单词上获得事件

3 个答案: