Javascript：防止鼠标点击事件移动光标（防止它改变选择）答案

【问题标题】：Javascript: Prevent mouse click event moving the cursor (prevent it changing selection)Javascript：防止鼠标点击事件移动光标（防止它改变选择）
【发布时间】：2014-07-17 06:21:31
【问题描述】：

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

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

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

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

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

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

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

（使用 js 或 jquery 或 css 都没有问题。）

【问题讨论】：

那个 JS fiddle 是否按预期工作？
@VishnudevK 图片按钮按预期工作。在单击按钮之前，您可能希望在第一行中进行范围选择。
那么什么不起作用？
@VishnudevK 文本按钮world :)

标签： javascript jquery html css

【解决方案1】：

这里的问题是 click 事件之前的 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/

即使用户在按下跨度后不小心拖动了一点鼠标，也能确保选择保持不变。涉及 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/

【讨论】：

您的解决方案很有帮助！所以我必须为<span>设置css，而不是<p>。现在该按钮在单击时可以正常工作。但是当你拖动它时，选择仍然会丢失。它发生在现实中，因为用户经常进行意外操作。他们可以在点击时移动鼠标，将操作变成拖动。你能给出任何解决方案吗？
查看我的编辑，可能会解决意外拖动问题。
在我的情况下，添加一个全局变量来存储选择可能不是很好，因为其他脚本可能会干扰鼠标点击事件，而我根本不知道这些脚本里面有什么。但我学到了很多。你的第一个答案真的很有帮助。但是，css 在我的脚本中不起作用，尽管它在小提琴中起作用。必须弄清楚为什么....
只是一个反馈 - 我相信在我的情况下鼠标事件受到其他脚本的干扰，我没有机会摆脱。必须考虑更多“hacky”的方式。
调试提示：将 span 直接放在 body 下方，给它绝对位置，并使用大的 z-index 将其打开。如果脚本在这种情况下工作，您可以确定事件绑定代码的其余部分是您需要查看的地方。

【解决方案2】：

$('div#di').on('click', 'span', function (e) {
    $('div#out p').html($(e.currentTarget).html());
});

【讨论】：

感谢您的帮助，但这可能不是答案，因为预期的应该是以前选择的内容（实际上我需要的不仅仅是.toString()），而不是按钮本身内的文本。

【解决方案3】：

在文本上叠加透明图像。因此，当您单击时，您正在对图像进行操作，就好像它是一个图像按钮一样。

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

并将'img#overlay_img'的CSS样式设为

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

一个可能的参考 - CONTENT OVERLAY WITH CSS

js应该是这样的

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

工作小提琴（叠加图像看起来很丑但有效）-http://jsfiddle.net/yvondtm/NH2DW/8/

【讨论】：