将事件绑定到文本节点

Question

这是我的HTML。我需要将click事件绑定到“someText”

<div id="container">
    someText <a href="#">A link</a>
</div>

“someText”可以是任何文本字符串

Answer 1

使用jQuery用<span>包装文本节点，点击该文本节点。

试一试： http://jsfiddle.net/3F4p4/

$('#container').contents()  // Get all child nodes (including text nodes)
               .first()     // Grab the first one
               .wrap('<span/>')    // Wrap it with a span
               .parent()           // Traverse up to the span
               .click(function() { alert('hi'); });​​  // add the click to the span

.contents()方法返回所有子节点，包括文本节点。所以你抓住第一个孩子，包裹它，遍历到它的父（现在是跨度），然后添加点击。

• http://api.jquery.com/contents/
• http://api.jquery.com/wrap/
• http://api.jquery.com/parent/

Answer 2

经过一番混乱之后，我发现帕特里克的解决方案稍微好一些。在这种情况下，它可以在链接之后选择节点，使其更加通用。可能最好在这里发布：）

$('#container')
.contents()
.filter(function() {
    return this.nodeType == Node.TEXT_NODE;
})
.wrap('<span/>')
.parent()
.click(function(){
   alert($(this).text());
});

Answer 3

Hacky方式没有更改html 标记：

1. 将contenteditable属性添加到容器。
2. 点击后，通过document.getSelection()查看所选节点并进行检查。
3. 如果选定的文本节点是非常节点，请执行您想要的操作。
4. 重置选择。

http://jsfiddle.net/quqtk8r6/2/

var el = document.getElementById("container")
el.setAttribute("contenteditable", "true")
el.style.cursor = "pointer"
el.style.outline = "none"
el.addEventListener("click", function () {
  var selection = document.getSelection(),
      node = selection.baseNode

  selection.removeAllRanges()
  if (node.nodeType == 3 && node.parentNode == el) {
    alert("someText are clicked")
  }
})
el.addEventListener("keydown", function (event) {
  event.preventDefault()
  return false
})

PS：这是更多的思考，而不是真正的推荐。

Answer 4

将其包装在<a>或<div>标记中，并将click事件分配给该元素。

  <a href="#" id="sometext">someText</a>

  $("#sometext").click(function() {
       do stuff here...
  });