HTML: Text in block-element;获得点击的确切位置

HTML: Text in block-element; get exact position of click

本文关键字：位置 Text in block-element HTML      更新时间：2023-09-26

我现在需要在在一个html块元素，只包含文本点击发生:

<div>This is some awesome text</div>

我想获得被点击的字母的位置。限制:不能为div添加额外的子元素。

选项吗?

我采用的解决方案是来自Mozilla的@TimDown。

function insertBreakAtPoint(e) {
var range;
var textNode;
var offset;
if (document.caretPositionFromPoint) {    // standard
    range = document.caretPositionFromPoint(e.pageX, e.pageY);
    textNode = range.offsetNode;
    offset = range.offset;
} else if (document.caretRangeFromPoint) {    // WebKit
    range = document.caretRangeFromPoint(e.pageX, e.pageY);
    textNode = range.startContainer;
    offset = range.startOffset;
}
// do whatever you want here!
}

有一个限制(至少我在Chromium中有一个小问题)，范围。textNode不一定与被单击的那个相同。所包含的文本可能比预期的短。原因尚不清楚。我只是通过range.textNode.parentElement进行访问。firstChild在我的例子中，div只有一个子元素

减去当前元素的偏移量，得到点击相对于元素的位置(fiddle):

$(function () {
    $("#awesome").click(function (event) {
      var div = $(this);  
      var posX = event.pageX - div.offset().left;
      var posY = event.pageY - div.offset().top;
      alert("X: " + posX + " Y: " + posY);
    });
});
你必须做其他的计算来找出哪个字母被点击了。
相关文章：