当用户拖动并进行选择并获取选定文本时调用函数

Question

我正在尝试复制 this jQuery plugin 的行为，但对于不是文本输入的元素。

我希望能够单击并拖动鼠标到 select 文本，当文本被 selected 时，该函数被调用并可以访问当前 select编辑文本。

Answer 1

您可以使用 mousemove 事件来检查文本选择。这是一个基本的例子。监听器（回调）只有在有新选择时才会被调用。

function addTextSelectListener(element, listener) {
  var currentSelTxt = '';
  element.addEventListener('mousemove', function() {
    var sel = window.getSelection();
    var newSelTxt = sel.toString();
    if (newSelTxt !== currentSelTxt) {
      currentSelTxt = newSelTxt;
      listener(sel, newSelTxt);
    }
  });
}
var outputElem = document.getElementById('output');
addTextSelectListener(window, function(sel, selTxt) {
  console.log(sel);
  outputElem.innerHTML = selTxt;
});

<body>
  <p>Some text and stuff!</p>
  <p id="output"></p>
</body>

Answer 2

这里是 fiddle：http://jsfiddle.net/z9rnnLmn/3/

因为您想在 "drag" 上执行此操作，所以在触发 mouseup 方法之前，mousedown 会稍微超时。单独的 Mouseup 可以在普通点击时触发，这就是延迟的原因。

祝你好运。

var DRAG = false;

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

$("body").on("mousedown", function () {
    setTimeout(function () {
        DRAG = true;
    }, 250)
});

$("body").on("mouseup", function () {
    if (DRAG) {
        alert(getSelectionText());
        DRAG = false;
    }

});

当用户拖动并进行选择并获取选定文本时调用函数

Call function as user drags and makes selection and get selected text

javascript

jquery

text

range