JavaScript получает событие на каждое слово

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.

Добавьте ваш ровный слушатель к родительскому элементу слов. Любое событие, которое получат элементы слова, будет пузыриться к родительскому элементу, и вы можете посмотреть свойство цели события, чтобы узнать, какое слово было нажато.

Вы используете библиотеку JS или работаете без нее?

Редактировать: Поскольку вы не используете библиотеку, jQuery - популярный выбор (достаточно популярный, чтобы считаться клише на SO, я думаю, что что-то говорит). Вот как вы могли бы сделать это с JQuery:

http://jsfiddle.net/eKvdn/ (нажмите слова)

Было бы очень хорошая идея, чтобы прочитать больше об этом, прежде чем использовать его, хотя.

Answer 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 в нем. Вы можете комбинировать это с предложением Матти, чтобы сделать код намного опрятным.

Answer 3

Вы можете использовать JavaScript, чтобы найти и обернуть каждое слово в привязке или промежутке, а затем добавить к нему обработчик onclick. См. how to get a word under cursor using JavaScript.