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, чтобы обернуть каждое слово для вас:

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 2

Чтобы сделать это любым возможным способом, вам, вероятно, все равно придется заключать каждое слово в отдельный элемент, как вы делаете, но вы можете, по крайней мере, избавиться от всего встроенного JavaScript.

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

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

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

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

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

Answer 3

Вы можете использовать JavaScript, чтобы найти и обернуть каждое слово в якорь или интервал, а затем добавить к нему обработчик onclick.См. , как получить слово под курсором, используя JavaScript .