Question

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

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

在mousedown上保存鼠标坐标，创建一个大小为width=0，height=0的新div，并为mousemove和{{绑定事件处理程序1}}。
开mouseup我根据当前鼠标位置调整div的大小。
在mousemove上，我取消绑定mouseup和mousemove的事件处理程序。

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

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

Answer 1

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

.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

用鼠标绘制矩形（div）

1 个答案: