Question

我试图复制this jQuery plugin的行为，但是对于非文本输入的元素。

我希望能够单击并拖动鼠标来选择文本，并且在选择文本时，会调用该函数并可以访问当前选定的文本。

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

这是一个小提琴：http://jsfiddle.net/z9rnnLmn/3/

因为你想在“拖动”上执行此操作，所以在鼠标触发方法之前，mousedown会略微超时。单独使用鼠标就可以通过常见点击触发，这是延迟的原因。

祝你好运。

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;
    }

});

调用函数作为用户拖动并进行选择并获取所选文本

2 个答案: