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

也许像这个演示的东西可以帮到你一点：

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。

Answer 2

您需要在某些容器中获取节点。如果您单击“节点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 3

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

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

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

基本上，将click事件委托给您希望其运行的最高级别元素（在此示例中，它仅使用了body，但您可能希望更具体）。使用$(e.target)获取实际点击的元素，.clone()来克隆它，以便您可以修改它而不影响实际的页面内容，.children().remove()删除所有它的后代元素，.end()返回上一个jQuery选择器对象，最后.text()获取剩余的文本内容。

Answer 4

结帐even bubbling / propagation

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

Answer 5

据我所知，这是不可能的。你不能：

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

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

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

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

5 个答案: