Javascript:防止鼠标单击事件移动光标(防止它改变选择)

Question

我有一种情况，当我点击一个按钮时，我需要点击前的当前选择。示例代码如下

$('div#test').on('click', 'span', function () {
    sel = window.getSelection();
    $('div#out p').text(sel.toString());
});

这里显示了预期的行为 - http://jsfiddle.net/yvondtm/NH2DW/

单击图像按钮后一切正常。如果您在单击图像之前进行了选择，那么您将获得输出 - 这里只是您选择的副本。

但是，如果您单击文本按钮，则选择会丢失，并且结果不是预期的那样。似乎单击文本会移动光标并因此更改选择。

我已经检查了 CSS 解决方案，例如 this one禁用选择，正如我在 fiddle 中所说的那样，-webkit-user-select: none;。它按照它说的去做，但没有任何帮助——即使不允许选择“范围”，插入符号仍然会移动!

我该如何解决这个问题？我是否必须找到某种方法将文本按钮转换为图像？

(使用 js 或 jquery 或 css 都没有问题。)

Answer 1

这里的问题是在点击事件之前的 mousedown 事件会清除任何现有的选择 - 在这之后 window.getSelection()返回空。为了解决这个问题，只需在可点击的 <span> 上禁用文本选择即可。 ，在你的情况下 #sp

#sp {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

演示:http://jsfiddle.net/NH2DW/3/

---

即使用户在按下 span 后不小心将鼠标稍微拖动了一点，也可以确保选择保持不变的迂回方式。涉及 JavaScript 但是。

$('div#di').on('click', 'span', function () {
    $('div#out p').text(selection);
});

var selection = '', onSelect = function(_event) {
    if($(_event.target).is(':not(div#di span)'))
        selection = window.getSelection().toString();
    else return false;
};
$(document).mouseup(onSelect).keyup(onSelect).mousedown(onSelect);

演示:http://jsfiddle.net/NH2DW/7/