CODEWITHSUNDEEP
javascripthtmlcsscursor
cssnewbie
cssnewbie

Reputation: 11

Issues with Cursor when using onmousemove on div

I want to create some kind of "drawing" inside an ordinary div (no canvas!). I am using the onmousemove event to trace the position of the mouse. The following code demonstrates my current situation:

CSS Rules:

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

Actual JavaScript/HTML part:

    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>

What is expected and the actual result?

When clicking the inner div and moving the mouse while holding the mouse button, the cursor should be constantly being "crosshair". This also works perfectly with IE9(RC), and partly with Firefox 3.6 - in Firefox, this only works when loading the site and clicking the first time into the inner div. When releasing the button and clicking and moving again, the "not allowed" cursor is shown and the CSS cursor attribute has no effect at all. On Google Chrome the cursor is not even changed (having constantly an input-cursor there).

Which choices I do have? Any advice is welcome.

Upvotes: 1

Views: 2093

Answers (1)

pimvdb
pimvdb

Reputation: 154818

The only thing I can help you with is about Chrome: set onselectstart = "return false": http://jsfiddle.net/F2mCS/2/.

Upvotes: 1

Related Questions