1

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

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

基本上我正在做以下事情：

  1. 在mousedown我保存鼠标坐标时，使用 size: 、 和绑定事件处理程序创建一个新width=0的height=0divmousemove和mouseup。

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

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

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

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

4

1 回答 1

3

rect发生这种情况是因为 Chrome 试图在拖动时选择悬停的元素。要解决此问题，只需将CSS 属性设置为（这是供应商前缀，不适用于 IE9 或更低版本rect）来防止选择元素：user-selectnone

.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;  
}

修改 JSBin。

于 2013-10-08T22:23:32.297 回答