Javascript 如何检测单击了哪一行

我有在div容器中硬中断和自动包装的内容。当用户点击一个单词（或图像）时，我想检测点击的是哪个“行号”。我研究过DOM级别2的对象，比如范围和选择，但似乎没有任何非复杂的方法可以实现这一点。我该怎么做

--编辑--

下面是我使用jquery的index（）方法的尝试：

---

问题是它给了我一行源代码；我很想知道它实际渲染在哪一行。

一种可能的方法是使用跨度的顶部偏移量。如果跨度的顶部偏移量大于其前一个跨度的顶部偏移量，则发生断线

var线=0； var-prev=0

$("span").each(function(e, i) {

  var currentSpan = $(i);
  if (currentSpan.offset().top > prev) {
    line++;

  }
  currentSpan.attr('data-line-number', line);
  prev = currentSpan.offset().top;
})


$("span").click(function() {
  alert($(this).attr('data-line-number'))
})

注意：

• 它假定包含在span标记中的每个单词
• 使用空的新行可能会出现错误

var行=0；
var-prev=0；
$（“span”）。每个功能（e，i）{
var currentSpan=$（i）；
如果（当前span.offset（）.top>prev）{
line++；
}
currentSpan.attr（'data-line-number'，line）；
prev=当前span.offset（）.top；
})
$（“span”）。单击（函数（）{
警报（$（this）.attr（'data-line-number'））
})

#内容{
宽度：200px；
边框：纯色2px黑色；
}

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbcc
AAAAAAAAAAAA
AAA
bbbbbbbbcc

此

行已单击，可使用手柄内的

$（此）

访问此行。这可能有帮助：

$("span").each(function(e, i) {

  var currentSpan = $(i);
  if (currentSpan.offset().top > prev) {
    line++;

  }
  currentSpan.attr('data-line-number', line);
  prev = currentSpan.offset().top;
})


$("span").click(function() {
  alert($(this).attr('data-line-number'))
})