Question

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

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

我找到了一张非常好的图片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让你开始。

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

1 个答案: