鼠标按下后移动鼠标时如何防止文本移动？答案

【问题标题】：How to prevent text from moving when I move the mouse after mousedown?鼠标按下后移动鼠标时如何防止文本移动？
【发布时间】：2016-06-05 00:44:31
【问题描述】：

我正在尝试编写一个可移动的对话框，但出现了问题。有时，当我想通过移动对话框上方的某个位置来移动对话框时，而不是对话框本身，标题文本正在移动，如下所示：

CSS 用于标题文本：

.arg-dialog-title{
    height: 20px;
    font-size: x-large;
    padding: 10px 30px 15px 30px;
    position: fixed;
    background-color: transparent;
    box-sizing: initial;
    font-weight: bold;
    outline: none;
    line-height: 1;
    border:0;
    user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
     text-decoration: none;
}

你可以在这个fiddle找到所有的代码和样式。

如何防止这种行为发生？

【问题讨论】：

标签： jquery html css dialog

【解决方案1】：

尝试将以下样式应用于您的标题：

user-drag: none; 
user-select: none;

另外，让它监听mousemove事件并调整对话的位置。

【讨论】：

和浏览器（chrome）不支持

【解决方案2】：

在您的 $(document).ready() 事件中添加以下脚本。

document.getElementsByTagName("BODY")[0].onselectstart = function(e) {
    if ($(e.target).hasClass("arg-dialog-title") || 
       (e.target).hasClass("arg-dialog-close-button")) {
        e.preventDefault();
        return false;
    }
    return true;
  };

它的作用是禁用对带有class = "arg-dialog-title" 和class = "arg-dialog-close-button" 的HTML 元素的选择。禁用对标题的选择也将阻止拖动。

但是，您可能没有注意到的是，如果您拖动关闭按钮，按钮本身连同标题将被选中并因此被拖动。这样我也添加了关闭按钮的类。

我还更新了你的小提琴。看看here。

如果您不希望用户在您的网站上选择任何内容，除了输入或文本区域中的文本，请使用此脚本：

document.getElementsByTagName("BODY")[0].onselectstart = function(e) {
    if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") {
        e.preventDefault();
        return false;
    }
    return true;
};

【讨论】：