单击时获取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

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

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);
});

看到这个小提琴 。

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（）或regex操作。

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

检查甚至冒泡/传播

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

Answer 5

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

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

这个答案给出了一个有一些好的见解的想法，但没有做你想要的（返回节点的索引）。

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