Question

我现在需要在一个html块元素中 where ，其中只包含单击发生的文本：

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

我想获得被点击的信件的位置。限制：无法向div添加其他子项。

任何选项？

Answer 1

我采用的解决方案感谢@TimDown取自Mozilla。

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中有一个小问题），range.textNode不一定必须与点击的那个相同。包含的文本可能比预期的短。原因尚不清楚。我只是通过 range.textNode.parentElement.firstChild 进行了访问，因为在我的情况下div只有一个孩子。

Answer 2

减去当前元素的偏移量以获得相对于元素（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);
    });
});

您必须进行其他计算以确定点击了哪个字母。

HTML：块元素中的文本;获得确切的点击位置

2 个答案: