这是我的简单代码:
<!DOCTYPE html>
<html>
<head></head>
<body>
<style>
</style>
<script>
var exit = 0;
document.onmousedown = function (e) {
exit = 0;
document.onmousemove = function (e) {
if (exit == 1) {
return;
} else {
var x = e.pageX;
var y = e.pageY;
var e = document.createElement("div");
e.style.width = 10 + "px";
e.style.height = 10 + "px";
e.style.background = "red";
e.style.top = y + "px";
e.style.left = x + "px";
e.style.position = "absolute";
document.body.appendChild(e);
}
};
};
document.onmouseup = function (e) {
exit = 1;
};
</script>
</body>
</html>
这就像画家。你按住鼠标左键，当你移动鼠标时，它应该画出由 div 元素组成的线，当你释放按钮时，它会停止。它实际上有效......有时。第一次它工作完美，但是在让鼠标左键向上并再按一次之后，只绘制一个元素并且移动鼠标不会执行任何操作。确切地说，有时会执行，有时不会执行。最好是如果您可以尝试此代码并且看看会发生什么。谢谢。
最佳答案
这似乎是因为拖动与选择冲突。这两个事件都涉及 mousedown 和随后的 mousemove。
您需要防止事件默认，然后运行您的代码。
更新的 fiddle :http://jsfiddle.net/L4KhJ/2/
防止这两个事件发生默认情况，如下所示:
document.onmousedown = function (e) {
stopDefault(e); // *** prevent default here
exit = 0;
document.onmousemove = function (e) {
stopDefault(e); // *** prevent default here
if (exit == 1) { ...
其中 stopDefault 是:
function stopDefault(e) {
if (e && e.preventDefault) {
e.preventDefault();
}
else {
window.event.returnValue = false;
}
return false;
}
上述函数的代码取自此线程:https://stackoverflow.com/a/891616/1355315
关于Javascript鼠标事件问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20761498/