Javascript鼠标事件问题
[英]Javascript mouse event issue
问题描述
Here's my simple code: 
这是我的简单代码：
<!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>
It's like painter.You hold left mouse button down and when you move mouse, it should draw line made of div elements and when you release button, it stops.It actually works...sometimes.First time it works perfect, but after letting left mouse button go up, and after additional press, only one element is drawn and moving mouse does not do anything.To be exact- sometimes it does and sometimes doesn't.Best would be if you could try this code and see what happens.Thanks. 就像画家，按住鼠标左键不放，移动鼠标时，它应该绘制由div元素组成的线，释放按钮时，它会停止，它实际上起作用...有时，它第一次很完美，但是让向上移动鼠标左键，再按一次，仅绘制一个元素，移动鼠标不执行任何操作-确切地说-有时会这样做，有时却不这样做。 。谢谢。
2 个解决方案
解决方案1
2 已采纳 2013-12-24 13:26:41
It seems to be because it conflicts dragging with selection . 似乎是因为它与选择 拖拽冲突。 Both events involve mousedown and subsequent mousemove . 这两个事件都涉及mousedown和随后的mousemove 。
You will need to prevent default of event and then run your code. 您将需要防止默认事件，然后运行您的代码。
Updated fiddle: http://jsfiddle.net/L4KhJ/2/ 更新的小提琴： http : //jsfiddle.net/L4KhJ/2/
Prevent the default on both events, like this: 防止两个事件都使用默认值，如下所示：
document.onmousedown = function (e) {
stopDefault(e); // *** prevent default here
exit = 0;
document.onmousemove = function (e) {
stopDefault(e); // *** prevent default here
if (exit == 1) { ...
Where stopDefault is: 其中stopDefault是：
function stopDefault(e) {
if (e && e.preventDefault) {
e.preventDefault();
}
else {
window.event.returnValue = false;
}
return false;
}
Code for above function taken from this thread here: https://stackoverflow.com/a/891616/1355315 从此线程获取的上述功能的代码位于： https : //stackoverflow.com/a/891616/1355315
解决方案2
1 2013-12-24 13:31:35
When you add some log output, you see that sometimes after a mouseup event, you get a mousedown shortly after. 当您添加一些日志输出时，您会发现有时在mouseup事件之后，不久之后您就会获得mousedown 。
Maybe this is a timing related problem. 也许这是一个与时间有关的问题。 I moved the assignment to onmousemove outside the onmousedown function and now it works properly 我将分配移到onmousedown函数之外的onmousemove ，现在它可以正常工作
var exit = 1;
document.onmousemove = function (e) {
if (exit == 1)
return;
var x = e.pageX;
var y = e.pageY;
var el = document.createElement("div");
el.style.width = 10 + "px";
el.style.height = 10 + "px";
el.style.background = "red";
el.style.top = y + "px";
el.style.left = x + "px";
el.style.position = "absolute";
document.body.appendChild(el);
};
document.onmousedown = function (e) {
exit = 0;
};
document.onmouseup = function (e) {
exit = 1;
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.