Question

我正在尝试获取带有一些嵌套跨度的click-event的文本，其顺序最接近我的特定跨度“ annotation-container”下的最宽。使用我当前的代码，我仅获得单击范围的文本。我需要在范围“注释容器”以下的每个范围的文本。每个文本之后，我必须触发一个函数。谢谢您的提示。

示例1-单击“测试”（嵌套范围的最低级别）：

第一次迭代文本：这是一个测试（嵌套跨度的最高级别）

第二个文本：一个测试（下一个较低的级别...）

第3个文本：测试（点击范围）

$('body').on('click', 'span.annotation', function(e) {
  var text = $(e.target).closest('span').text();;
  console.log(text);
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="annotation-container">
        <span class="annotation">
              <span class="annotation">This is
                   <span class="annotation">a
                       <span class="annotation">test</span>
                   </span>
              </span>
        </span>
        <span class="annotation">
              <span class="annotation">One more
                   <span class="annotation">great</span>
                        <span class="annotation">test
                            <span class="annotation">!</span>
                        </span>
                   </span>
              </span>
     </span>

Answer 1

使用e.stopPropagation()而不是e.preventDefault()来停止事件起泡。并且可能是this而不是e.target。

请注意，在最初的示例中，您在span之后关闭了great：
<span class="annotation">great</span>

如果您有body，为什么还要将选择器设置为.annotation-container？使用它会更好。

$('.annotation-container .annotation').on('click', function(e) {
  $($(this).parentsUntil('.annotation-container > .annotation').get().reverse()).each(function() {
    console.log($(this).text());
  });

  console.log($(this).text());
  e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="annotation-container">
  <span class="annotation">
    <span class="annotation">This is
      <span class="annotation">a
        <span class="annotation">test</span>
      </span>
    </span>
  </span>
  <span class="annotation">
    <span class="annotation">One more
      <span class="annotation">great
        <span class="annotation">test
          <span class="annotation">!</span>
        </span>
      </span>
    </span>
  </span>
</span>

点击事件嵌套跨度

1 个答案: