我有一个包含大约 30,000 个单词的 HTML 文档。
我希望能够在用户点击任何单词时执行一些操作。现在为了简单/概念，我只想alert()那个词。
例如，在关于的段落中，如果我点击“拥有”，它应该运行alert("have")。
我正在使用 jQuery。
【问题讨论】：
标签： javascript jquery
var p = $('p');
p
.html(function(index, oldHtml) {
return oldHtml.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>')
})
.click(function(event) { alert(event.target.innerHTML) });
我考虑了Pablo Fernandez 的建议。
那么，这会是高性能的吗（例如，它不会冻结慢速用户的浏览器？）另外，您能否详细说明 event.target 的工作原理？
这很可能会降低 30,000 字的页面的性能。我认为这太过分了，可能会从分页中受益，但我不知道你的具体情况。
event.target 属性包含启动事件的元素 - 事件冒泡/传播到其父级，然后由父级处理事件，因此在单独的 span 元素上没有 30,000 个事件。
【讨论】：
event.target 属性
不幸的是，我认为您需要处理文本并在每个单词周围加上<span class ='clickableWord'> YOUR_WORD </span>。
然后：
$(".clickableWord").click(
function(this){alert(this.text());}
);
任何尝试使用绝对定位来定位单词的方法都容易出现缩放、字体大小等问题。
这里已经解决了Getting text at clicked location in an HTML element
是否有静态 HTML 文档或您正在生成它？如果您正在生成它，那么在每个单词周围添加这些标签应该不会太难。
如果您需要事后对现有的 HTML 执行此操作，那么这会有点困难。选择包含大部分单词的元素（可能是 div 或 p）并将这些单词读入一个数组。然后重新输出它们，然后是那些跨度标签
【讨论】：
我参加聚会有点晚了。
试试这个。
<div id="text"><!-- text --></div>
init()
function init()
{
addListeners();
adjustText(document.getElementById("text"));
}
function addListeners()
{
document.body.onclick = clicked;
}
function adjustText(holder)
{
text = holder.innerHTML.split(" ");
holder.innerHTML = "";
for(var i=0;i<text.length;i++)
{
text[i] = text[i].replace("\n", "");
var newText = document.createElement("span");
var leadSpace = document.createTextNode(" ");
var endSpace = document.createTextNode(" ");
newText.innerHTML = text[i];
holder.appendChild(leadSpace);
holder.appendChild(newText);
holder.appendChild(endSpace);
}
}
function clicked(evt)
{
if(evt.target.tagName == "SPAN" && evt.target.innerHTML)
{
alert(evt.target.innerHTML);
}
}
【讨论】：
我没有通过代码发布它是如何完成的，但事实上这是在这里完成的，没有在句子中插入任何额外的spans 或其他元素。
【讨论】：