时间戳

首页 > 解决方案 > CLICK 事件上 getSelection() API 的行为

javascript - CLICK 事件上 getSelection() API 的行为

问题描述

如果我从这个 div 中选择整个文本，那么输出将是“abc1234”。当我在“c”和“1”之间单击时，输出应该是“abc”。但它返回之前突出显示的文本（在本例中为“abc1234”）。如果我在同一位置再次单击，则会返回预期的输出（在本例中为“abc”）。有什么方法可以让我在第一次点击时获得预期的输出？

$('.test-subject').on('click', function(){
 var sel = window.getSelection();
 console.log(sel.toString());
});

// start selecting the whole text
const range = new Range();
range.selectNode( $('.test-subject')[0] );
window.getSelection().addRange( range );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test-subject">abc1234</div>

标签： javascripthtmlcssselection

解决方案

你可以试试这个例子：

import $ from "jQuery";
$(document).on('selectionchange', function(){
  var sel = window.getSelection();
  console.log(sel.toString(),sel.type);
});

或者

import $ from "jQuery";
$(document).on("selectionchange", function () {
  var sel = window.getSelection();
  if ($(sel.anchorNode).closest(".test-subject").length > 0) {
    console.log(sel.toString(), sel.type);
  }
});

如果您只需要跟踪.test-subject元素中的选择

推荐阅读