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

I need to now where in a html block-element that contains only text a click happened:

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

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

I would like to get the position of the letter that was clicked. Limitation: it is not possible to add additional childs to the div.

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

Any options?

2 个解决方案

#1

Solution I adopted thanks to @TimDown is taken from Mozilla.

我采用的解决方案感谢@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!
}

There is one limitation (at least I have a small problem in Chromium) that the range.textNode must not necessarily identical to the one that was clicked. The contained text might be shorter than expected. Reason for that remained unknown. I just did the access via range.textNode.parentElement.firstChild as in my case the div only has one child.

有一个限制(至少我在Chromium中有一个小问题),range.textNode不一定必须与点击的那个相同。包含的文本可能比预期的短。原因尚不清楚。我只是通过range.textNode.parentElement.firstChild进行访问,因为在我的情况下div只有一个子进程。

#2

Subtract the offsets of the current element to get the position of the click relative to the element (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);
    });
});

You will have to do other calculations to figure out which letter was clicked.

您将不得不进行其他计算以确定单击了哪个字母。

#1