时间戳

首页 > 解决方案 > 如何知道鼠标悬停在 DIV 中哪个位置的哪个字符

javascript - 如何知道鼠标悬停在 DIV 中哪个位置的哪个字符

问题描述

众所周知，我们可以使用鼠标事件来获取目标，然后获取目标在网页中的位置。

但是如何知道我的鼠标悬停在哪个字符上？

例如，在一个 div 中有一些文本“测试”，我的鼠标悬停在字符“s”上；我怎样才能得到目标是's'，它的位置像offsetTop和offsetLeft？

有 2 个不满意的解决方案：

  1. 将文本拆分为字符和独立跨度中的每个字符。它将创建大量跨度并可能导致页面死机（如果我错了，请纠正我，如何避免页面死机？）...

  2. 使用画布并将字体设置为 div ；使用测量文本获取文本宽度；这种方法可以大致定位我们所在的位置，但不稳定；例如，我们不知道浏览器如何包装 wrods 并将它们分成一个新行......

标签： javascripthtml

解决方案

这对你有好处吗？

$cont = $('p');
parts = $.map($cont.text().split(''), function(v){
    return $('<span/>', {text:v});
});
$cont.empty().append(parts);

$(document).ready(function() {
	$('span').on('mouseover', function() {
  	console.log($(this).text() + ': ' + JSON.stringify($(this).offset()))
  })
})
p span:hover{background:#F00}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus e Lorem ipsum dolor sit amet.</p>

推荐阅读