如何检测点击了哪一行

Question

我在一个 div 容器中包含硬中断和自动换行的内容。当用户单击一个单词（或图像）时，我想检测单击了哪个“行号”。我已经研究过 DOM Level 2 对象，例如 Range 和 Selection，但似乎没有任何我能想到的不复杂的方式来完成这项工作。我怎样才能做到这一点？

--编辑--

    $('span').click(function() {
    alert($(this).index())
})

这是我使用 jquery 的 index() 方法的尝试： http://plnkr.co/edit/dayeGALdxTAC0HadjGIi?p=preview

问题是它给了我源代码行；我有兴趣知道它实际呈现在哪一行。

Answer 1

一种可能的方法是使用跨度的顶部偏移。如果跨度的顶部偏移量大于其直接前任的顶部偏移量，则发生换行。

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 line = 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'))
})

#content {
  width: 200px;
  border: solid 2px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="content">
  <span>AAA</span><span>AAA</span><span>AAA</span><span>AAA</span><span>AAA</span>
  <span>BBB</span><span>BBB</span><span>BBB</span><span>CC</span>
  <span>AAA</span><span>AAA</span><span>AAA</span><span>AAA</span>
  <span>AAA</span>
  <span>BBB</span><span>BBB</span><span>BBB</span><span>CC</span>
</div>