Getting mouse position in major internet browsers using javascript

Question

I read this article on creating pop-up notes with javascript and css

The problem is that this file only works in IE, since window.event is undefined in Firefox.

// assigns X,Y mouse coordinates to note element
note.style.left=event.clientX;
note.style.top=event.clientY;

So could you give me a fully working example? Or at least how can I change javascript code to work in both internet browsers?

Answer 1

There are more than two browsers, but in most of them the following should work (adapted from the function on the page that you linked to):

showNote = function(evt) {
    evt = evt || window.event;
    // gets note1 element
    var note1=document.getElementById('note1');
    // assigns X,Y mouse coordinates to 'note1' element
    note1.style.left=evt.clientX;
    note1.style.top=evt.clientY;
    // makes note1 element visible
    note1.style.visibility='visible';
};

, event window , , showNote. evt = evt || window.event; window.event evt, ( Internet Explorer).

Answer 2

, . , , .

//

window.whereAt= (function(){
    var fun;
    if(typeof pageXOffset== 'number'){
        fun= function(e){
            var pX, pY, sX, sY;

            pX= e.clientX || 0;
            pY= e.clientY || 0;
            sX= window.pageXOffset;
            sY= window.pageYOffset;
            return [(pX+sX), (pY+sY)];
        }
    }
    else{
        fun= function(e){
            e= (e && e.clientX)? e: window.event;
            var pX, pY, sX, sY;

            pX= (e.clientX);
            pY= (e.clientY);
            var d= document.documentElement;
            var b= document.body;
            sX= Math.max(d.scrollLeft, b.scrollLeft);
            sY= Math.max(d.scrollTop, b.scrollTop);
            var pwot= [(pX+sX), (pY+sY)];
            return pwot;
        }
    }
    return fun;
})()
//test case
document.ondblclick= function(ev){
    alert(whereAt(ev))
};

Answer 3

- , canvas.addEventListener onclick funion . IE, FF, Chrome.

canvas.addEventListener('mousedown', ev_canvas, false);
function ev_mousedown(ev){
    var posx=0;posy=0;
    if (e.offsetX > 0) { // IE, Chrome
        posx = e.offsetX;
        posy = e.offsetY;
    } else{ // Firefox
        posx = e.layerX;
        posy = e.layerY;
    }
 } // This also works correctly while zoom!=100%

<div style="position: relative;">
    <canvas id="canvas" width="600" height="600" onClick="newClick()" style="position: relative;"></canvas>
</div>

. : http://dev.opera.com/articles/view/html5-canvas-painting/

---

Firefox.

showNote = function(evt) {
    evt = evt || window.event;
    // gets note1 element
    var note1=document.getElementById('note1');
    // assigns X,Y mouse coordinates to 'note1' element
    note1.style.left=evt.clientX;
    note1.style.top=evt.clientY;
    // makes note1 element visible
    note1.style.visibility='visible'
}

I have google for many solutions and the link to the relatively official site for bros is different: http://www.quirksmode.org/dom/w3c_cssom.html#mousepos

But still no solution has been found in Firefox 20. window.event has no definition in FF. But it works well in IE and Chrome.

Interestingly, I understood something in this matter?