用鼠标绘制矩形（divs）

我想用鼠标事件绘制矩形（divs）。这里是我的代码：用鼠标绘制矩形（divs）

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

基本上我做了以下内容：

在mousedown我保存鼠标坐标，创建一个大小一个新的div：width=0，height=0和绑定事件处理程序为mousemove和mouseup。
对mousemove我基于当前鼠标位置调整div的大小。
在mouseup我取消绑定事件处理程序mousemove和mouseup。

似乎在Firefox中工作良好，甚至是IE 10，但在Chrome有时mousemove事件触发只有2〜3次，鼠标按下后，所以得出格没有得到调整。

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

来源

2013-10-08 Tamás Pap

适用于最新的Chrome浏览器 - 您是否看到控制台中有任何错误？ – Doorknob

控制台没有错误，有时只出现'错误'。试试这个例子：绘制一个矩形，当你绘制第二个时，确保当你在第一个div上时释放鼠标。现在尝试创建第3个矩形。该错误应该出现。可以？（谢谢） –

发生这种情况是因为Chrome试图通过拖动来选择已搁置的rect元素。为了解决这个问题，简单地防止rect元件从通过设置user-select CSS property到none被选择（这是vendor prefixed和will not work on IE9 or lower）：

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

来源

2013-10-08 22:23:32

是的，这是有道理的。现在它工作正常。非常感谢。我很想为此找到一个javascript解决方案，使其跨浏览器兼容。任何想法的JavaScript解决方案？ –

@TamasPap当你使用jQuery，SLaks的答案在这里应该做的伎俩：http://stackoverflow.com/questions/2700000/how-to-disable-text-selection-using-jquery –

谢谢詹姆斯。现在它按预期工作。赞赏你的帮助！ –

用鼠标绘制矩形（divs）

回答

相关问题