JavaScript在每個單詞上都會發生事件

通常JavaScript會綁定DOM元素上的事件。但我想知道用戶點擊了哪個單詞。對我來說，熟悉的方式只是包裝每話就像這裏：JavaScript在每個單詞上都會發生事件

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

我認爲這是一個冗餘代碼，並有可能使代碼更簡潔？謝謝

來源

2011-05-07 megas

要以任何可行的方式做到這一點，您可能仍然需要將每個單詞包裝在單獨的元素中，就像您正在做的一樣，但您至少可以擺脫所有內嵌JavaScript。

將你的監聽器添加到單詞的父元素中。單詞元素接收到的任何事件都會冒泡到父元素，您可以查看事件目標屬性以找出哪個單詞被點擊。

你使用的是一個JS庫還是你沒有工作？

編輯：既然你沒有使用庫，jQuery是一個流行的選擇（足夠流行，被認爲是一個陳詞濫調，所以我想這說什麼）。這裏是你如何用jQuery做到這一點：

http://jsfiddle.net/eKvdn/（點擊的話）

這將是一個非常不錯的主意使用它之前閱讀更多關於它，雖然。

來源

2011-05-07 19:21:58

我不知道哪個JS庫可以幫我解決這個問題。如果有人找到圖書館來解決這個問題，我會很感激。 – megas 2011-05-07 19:25:56

嗯，你總是可以編寫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的建議結合起來，使代碼更加整潔。

來源

2011-05-07 19:25:05

您可以使用JavaScript查找並將每個單詞封裝在錨或跨度中，然後將onclick處理程序添加到該處理程序中。請參閱how to get a word under cursor using JavaScript。

來源

2011-05-07 19:25:54 mdonoughe

JavaScript在每個單詞上都會發生事件

回答

相關問題