如何检测点击了哪一行

Question

我有内容在 div 容器中进行硬中断和自动换行。当用户点击一个单词（或图像）时，我想检测点击了哪个 "line number" 。我研究了 DOM 级别 2 对象，如范围和选择，但似乎没有任何我能想到的简单方法来完成这项工作。我怎样才能做到这一点？

--编辑--

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

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

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

Answer 1

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

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>

如何检测点击了哪一行

How to detect which line was clicked

javascript

jquery

dom

textnode