用鼠标绘制矩形（div）

Question

我正在尝试使用鼠标事件绘制矩形（div）。这是我的代码：

http://jsbin.com/apediti/2/edit

基本上我在做以下事情：

1. 在mousedown 上，我保存鼠标坐标，创建一个大小为：width=0、height=0 的新 div，并为mousemove 和mouseup 绑定事件处理程序。

   李>

2. 在mousemove 上，我会根据当前鼠标位置调整 div 的大小。

3. 在mouseup 上，我取消绑定mousemove 和mouseup 的事件处理程序。

它似乎在 Firefox 甚至 IE 10 中运行良好，但在 Chrome 中，mousemove 事件有时在 mousedown 后仅触发 2 或 3 次，因此绘制的 div 不会调整大小。

我找不到原因。任何帮助表示赞赏。

Answer 1

发生这种情况是因为 Chrome 试图在拖动时选择悬停在 rect 上的元素。要解决此问题，只需通过将user-select CSS property 设置为none（这是vendor prefixed 和will not work on IE9 or lower）来防止选择rect 元素：

.rect {
    position: absolute;
    border: 2px solid rgba(199, 25, 9, 0.64);
    -webkit-user-select: none;  /* Chrome, Safari, Opera */
    -moz-user-select: none; /* Firefox all */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;  
}

Modified JSBin.