如何将 onclick 鼠标位置与确切的 DOM 元素内容相关联？

Question

使用 jquery 我尝试创建一个插件，它可以执行以下操作：给定一个任意网页，该网页主要是基于文本的，如维基百科等。基本上我说的是浏览器呈现的纯 HTML。现在，如果用户单击网站上的某个位置，例如在文本段落的有趣句子（或单词）的中间，该插件会检测到此单击 - 此时我认为我正在谈论一个简单的 onclick事件。

我现在想做的是：插件不仅知道用户点击了，而且还知道 DOM 树中的确切位置。这意味着，例如，我想知道单击与包含字符串的 span 元素相关，并且在该字符串中用户在字符 4 和 5 之间单击。

我找到了一个显示非常好的图像 我尝试做什么。

有了这样的插件，人们可以做很多事情，例如：突出显示一些文本，就像在学习书籍时所做的那样，或者在不同网站上的文本段落之间创建突出显示的相关性，... 但目前我只是在考虑如何收集浏览器中可视化所需的数据，

谢谢您的任何提示

Answer 1

您可以从以下内容开始侦听文档中任何位置的点击：

$(function() {
    $(document).click(function(evt) {
        var elementClicked = evt.target;
        var xCoordinate = evt.pageX;
        var yCoordinate = evt.pageY;

        alert('You clicked a ' + elementClicked.tagName + 
            ' at {' + xCoordinate + ',' + yCoordinate + '}');

        // Do work to figure out what the element was and where within it was clicked
        switch (elementClicked.tagName.toLowerCase()) {
            case "input":
            case "span":
            case "button":
            case "label":
            case "select":
            case "textarea":
            case "p":
            ...
        }
    });
});

问题是，任何其他具有 onclick 事件的内容都需要阻止该事件传播到您的“主”点击处理程序。

这里有一个 JSFiddle 可以帮助您入门。