Question

我想在普通div（无画布！）中创建某种“绘图”。我正在使用onmousemove事件来跟踪鼠标的位置。以下代码演示了我目前的情况：

CSS规则：

 #outer { width: 400px; border: 1px solid #000000; }
 #inner { width: 100%; height: 20px; background: green; }

实际的JavaScript / HTML部分：



    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>

预期结果和实际结果是什么？

单击内部div并在按住鼠标按钮的同时移动鼠标时，光标应始终为“十字准线”。这也适用于IE9（RC），部分使用Firefox 3.6 - 在Firefox中，这仅适用于加载网站并第一次点击内部div。释放按钮并再次单击并移动时，将显示“不允许”光标，并且CSS光标属性完全没有效果。在谷歌浏览器上，光标甚至没有改变（在那里不断有输入光标）。

我有哪些选择？欢迎任何建议。

Answer 1

我唯一能帮到您的是Chrome：设置onselectstart = "return false"：http://jsfiddle.net/F2mCS/2/。

在div上使用onmousemove时光标的问题

1 个答案: