你必须做其他的计算来找出哪个字母被点击了。
我现在需要在在一个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);
});
});