Javascript：防止鼠标单击事件移动光标（防止更改选择）

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

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

此处显示了预期的行为-

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

但是如果你点击一个文本按钮，选择就会丢失，结果也不会如预期的那样。似乎单击文本会移动光标，从而更改选择

我已经检查了CSS解决方案，比如禁用选择，正如我在小提琴中所做的那样，

-webkit user select:none。它照它说的做，但不提供任何帮助-即使不允许选择“范围”，插入符号仍然会移动

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

（使用js、jquery或css来实现这一点没有问题。）
这里的问题是，单击事件之前的mousedown事件会清除任何现有的选择，然后
window.getSelection（）返回空。要解决此问题，只需在可单击的
上禁用文本选择，在您的情况下为
#sp

演示：


一种循环方式，即使用户在按下跨度后不小心拖动了鼠标，也可以确保选择保持不变。涉及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);

演示：
将透明图像覆盖在文本上。所以，当你点击时，你正在对一个图像进行操作，就像它是一个图像按钮一样

<div id="container">
    <span id="wrapper">
        <img src="transparent image" id="overlay_img" />
        <p id="button_text"> Or you can use transparent property </p>
    </span>
</div>

一个可能的参考-

js应该是这样的

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

正在工作的fiddle（覆盖图像看起来很难看，但可以工作）
JS fiddle是否按预期工作？@VishnudevK图像按钮按预期工作。在单击按钮之前，您可能希望在第一行中选择范围。那么什么不起作用？@VishnudevK文本按钮
world
：）您的解决方案帮助很大！因此，我必须为
设置css，但不能设置
。现在，单击按钮时，按钮可以正常工作。但当您拖动它时，选择仍然会丢失。它发生在现实中，因为用户经常进行意外操作。他们可能会在单击时移动鼠标，将操作变为拖动。您能提供任何解决方案吗？请参阅我的编辑，可能会修复意外拖动问题。在我的情况下，添加全局变量来存储选择可能不太好，因为其他脚本可能会干扰鼠标单击事件，而我根本不知道这些脚本中有什么内容。但是我学到了很多。你的第一个答案真的很有帮助。然而，css在我的脚本中不起作用，尽管它在小提琴中起作用。我必须找出原因…只是一个反馈-我相信在我的情况下，鼠标事件会受到其他脚本的干扰，我没有机会摆脱这些脚本。调试提示：把你的跨距直接放在身体下面，给它绝对位置，然后用一个大的z索引把它调高。如果脚本在这种情况下工作，您可以确定事件绑定代码的其余部分是您需要查看的地方。感谢您的帮助，但这可能不是答案，因为预期内容应该是以前选择的内容（实际上我需要的不仅仅是
.toString（）
），而不是按钮本身内部的文本。
<div id="container">
    <span id="wrapper">
        <img src="transparent image" id="overlay_img" />
        <p id="button_text"> Or you can use transparent property </p>
    </span>
</div>

position: absolute;
width: 100%; /* strech image to cover entire span */
height: 100%;
top: -1px; /* minor adjustments if the span has padding */
left: -1px;

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