我想在一个普通的 div(没有 Canvas !)中创建某种“绘图”。我正在使用 onmousemove 事件来跟踪鼠标的位置。下面的代码演示了我目前的情况:
CSS 规则:
#outer { width: 400px; border: 1px solid #000000; }
#inner { width: 100%; height: 20px; background: green; }
实际的 JavaScript/HTML 部分:
<pre><code> var is_drawing = false;
function startdraw() {
is_drawing = true;
var div = document.getElementById("inner");
div.setAttribute("style", "cursor: crosshair");
}
function stopdraw() {
is_drawing = false;
var div = document.getElementById("inner");
div.setAttribute("style", "cursor: auto");
}
function dodraw(e) {
if (!e) {
e = window.event;
} else if (!is_drawing) {
return;
}
// Some more code to be added later
var deb = document.getElementById("deb");
deb.innerHTML = "coords -- x(" + String(e.clientX) + ") y(" + String(e.clientY) + ")";
}
</script>
<div id="outer">
<div id="inner" onmousedown="startdraw()" onmouseup="stopdraw()" onmousemove="dodraw(event)"></div>
</div>
</code></pre>
预期和实际结果是什么？
单击内部 div 并在按住鼠标按钮的同时移动鼠标时，光标应始终处于“十字准线”状态。这也适用于 IE9(RC)，部分适用于 Firefox 3.6 - 在 Firefox 中，这仅在加载站点并第一次单击内部 div 时有效。释放按钮并再次单击并移动时，将显示“不允许”光标，CSS 光标属性根本不起作用。在谷歌浏览器上，光标甚至没有改变(那里一直有一个输入光标)。
我有哪些选择？欢迎任何建议。
最佳答案
我唯一可以帮助您的是关于 Chrome:设置 onselectstart = "return false": http://jsfiddle.net/F2mCS/2/ .
关于javascript - 在 div 上使用 onmousemove 时光标出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5304396/