获取HTML节点（不一定是元素）在点击

Question

我有一个Web应用程序，单击HTML中的任何节点后，需要检索其父节点的childNodes数组中的该节点的索引。但是，我无法通过onclick事件获取当前选定的节点。该事件的返回目标是元素中包含的element而不是具体的node。

<div>This is Node 1<span>node 2</span>, node 3, and <span>node 4</span></div> 

如果你点击了跨度为节点2或节点4，它是直接地知道你在哪里：当存在文本节点，如这种差异是很重要的。但是，如果您单击节点1和节点3的文本，我似乎无法找到事件将帮助您确定哪些部分实际内容被点击的位置。

这种情况很重要，因为后面的操作需要检查文档中的某些属性，无论是前进还是后退，直到第一次匹配。所以，如果节点2和节点4都是匹配的搜索，我需要知道我是否在节点1或节点3中，以便知道哪一个返回。例如，如果向右搜索，则从节点1开始意味着应该返回节点2，并且从节点3开始意味着应该返回节点4。显然，这是一个简化，但它表明了这个问题。有谁知道这个标准的解决方案？如果我能得到节点对象或索引，那应该就足够了。 jquery很好，但没有必要。

Answer 1

你需要让你的节点在一些容器中。如果您点击“节点1”文本，功能将返回您一个<div>元素。但是，如果你想改变这个你代码：

<div> 
    <span>This is Node 1</span> 
    <span>node 2</span> 
    <span>, node 3, and </span> 
    <span>node 4</span> 
</div> 

它会工作，并返回<span>容器。我认为不可能以其他方式。

您最终可以制作一些JavaScript split()或正则表达式操作。

Answer 2

如果你只是试图找出你点击的元素的文本，减去子节点的文本，我有一个解决办法：

$('body').on('click', function(e) { 
    alert('Node Text: '+$(e.target).clone().children().remove().end().text()); 
}); 

http://jsfiddle.net/xoegujqu/1/

从本质上讲，委托点击事件您希望为此运行的最高级别元素（在此示例中，它只是使用body，但您可能希望更具体）。使用$(e.target)来获取实际点击的元素，.clone()克隆它，以便在不影响实际页面内容的情况下修改它，.children().remove()删除所有它的后代元素，.end()返回到先前的jQuery选择器对象，然后最后.text()获取剩余的文字内容。

Answer 3

退房even bubbling/propagation

另外：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener 将useCapture部分

Answer 4

这是不可能做到这一点，据我所知。您不能：

1. 检测文本节点上的事件。
2. 检测文本节点相对于窗口或页面的位置。

This answer给出了一些很好的见解，但没有做你想做的事情（返回节点的索引）。

我相信你运气不好，除非你能找到一种方法来使用上面的解决方案来确定索引。

Answer 5

也许就像这个演示的财产以后可以帮助您了一点：

document.getElementsByTagName('div')[0].addEventListener('click', function() { 
    var fullStr = this.innerHTML.replace(/<[^>]*>/g, ''), 
     sel = window.getSelection(), 
     str = sel.anchorNode.data, 
     clickPos = sel.focusOffset, 
     wordPosLeft = str.slice(0, clickPos + 1).search(/\S+$/), 
     wordPosRight = str.slice(clickPos).search(/\s/), 
     wordClicked, 
     nextWordRegex, 
     nextWordPosLeft, 
     nextWord; 

    if(wordPosRight < 0) { 
     wordClicked = str.slice(wordPosLeft); 
    } else { 
     wordClicked = str.slice(wordPosLeft, wordPosRight + clickPos); 
    } 
    nextWordRegex = new RegExp(wordClicked); 
    nextWordPosLeft = fullStr.search(nextWordRegex) + wordClicked.length; 
    nextWord = fullStr.slice(nextWordPosLeft).match(/^\s*(\S*)\s*.*$/)[1];  

    console.log('wordClicked: ' + wordClicked); 
    console.log('nextWord: ' + nextWord); 
}); 

见this fiddle。