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

Question

我尝试使用 jquery 创建一个插件，它可以执行以下操作:给定一个任意网页，该网页主要是基于文本的，例如维基百科等。基本上我说的是浏览器呈现的纯 HTML。现在，如果用户点击网站上的某个地方，比如在文本段落的一个有趣的句子(或单词)中间，插件会检测到这个点击——此时我想我说的是一个简单的 onclick 事件。

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

我找到了一张显示效果很好的图片 what I try to do .

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

感谢任何提示

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 事件的东西需要阻止该事件传播到您的“主”点击处理程序。

Here's a JSFiddle让你开始。