有没有人知道用javascript来判断某些文字中鼠标点击的位置是否可行?我知道获取x,y坐标很容易,但我想要文本中的位置。
例如,如果我点击<p>foo bar</p>
内部
我希望能够告诉点击是在第5个字符上/之后。或者foo b
在点击之前,ar
在点击之后。
顺便说一句,我也在使用jQuery,我对纯JS和使用jQ的解决方案感到满意。
提前致谢。
答案 0 :(得分:1)
Javascript和浏览器不直接支持此功能,但您可以技术上将每个字符包装在一个范围内,并根据点击的范围进行操作:
<p>
<span>f</span>
<span>o</span>
<span>o</span>
<span> </span>
<span>b</span>
<span>a</span>
<span>r</span>
</p>
如果有人真的试过这个,那就准备好用速龙吃掉了:p
答案 1 :(得分:1)
扩展codeka的答案和我的评论。 。 。试试这个(我假设你的目标p
有id my_p
):
(function() {
var p = $('#my_p');
var o_string = p.text();
p.html('<span>' + o_string.split('').join('</span><span>') + '</span>');
$('span', p).each(function(i) {
$(this).data('MyIndex', i);
}).click(function() {
var char_index = $(this).data('MyIndex');
if (char_index >= 5) {
alert('You clicked after character 5! Before: "' + o_string.substring(0, char_index) + '", After (inclusive): "' + o_string.substring(char_index) + '"');
}
});
})();
这是做什么的: 1.找到您需要按字符单击知识的段落,2。将该段落中的文本拆分为多个单字符跨度,3。通知其在字符串中的位置的每个单字符跨度,以及4 。为每个范围分配一个click()处理程序,它会显示有关范围的信息(包括char索引&gt; = 5的示例,并打印字符串的前后部分)。
当然你可能想把它放在$(document).ready(...)
而不是匿名函数中;我不知道你是否有一个先决条件来激活这个检测。
答案 2 :(得分:0)
坦率地说,我不太喜欢对文本进行抄写和“跨越”。但是我不太确定你在寻找什么,如果你只需要点击这个单词并做dblclick而不是点击就行了,我有下一个代码:
$('*').dblclick(function(event){
console.log((window.getSelection() || document.getSelection() || document.selection.createRange().text).toString());
event.stopPropagation();
});
之后,您可以根据需要取消选择文本。 如果没有toString(),你将得到具有很多属性的对象,也可以研究它。