firefox - Getting mouse position in major internet browsers with javascript - Stack Overflow

admin管理员组

文章数量:1393071

I read this article regarding creating popup notes with javascript and css

The problem is that this one works only 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 point me a fully working example? Or at least, how could i modify the javascript code to make it work in both internet browsers?

I read this article regarding creating popup notes with javascript and css

The problem is that this one works only 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 point me a fully working example? Or at least, how could i modify the javascript code to make it work in both internet browsers?

• javascript
• firefox
• popup
• mouse
• position

Share Improve this question Follow edited Apr 27, 2017 at 15:54 Cœur 38.8k2525 gold badges206206 silver badges278278 bronze badges asked May 25, 2010 at 10:21 OrElseOrElse 10k4040 gold badges149149 silver badges265265 bronze badges 1

• Most browsers pass the event object as a parameter to the handler function, rather than making it available as windows.event. – Syntactic Commented May 25, 2010 at 10:31

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

There are more than two browsers, but the following should work in most of them (adapted from the function on the page 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';
};

The problem is that not all browsers have an event property of window and instead use an event object implicitly passed in as a parameter to an event handler function such as showNote. The evt = evt || window.event; line assigns window.event to the evt variable if no event parameter was passed into the function (which is what happens in Internet Explorer).

You can separate the two branches when you define the method. It takes more characters than bundling them together, but you do not have to check for support on every every call.

//

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))
};

I finally found a solution, but using canvas.addEventListener instead of onclick funion bind in attributes of canvas. And it works in 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>

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

---

The following codes doesn't work in 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 referenced the relatively official site for browers differs: http://www.quirksmode/dom/w3c_cssom.html#mousepos

But still have not found a solution in Firefox 20. window.event has no definition in FF. But works well in IE and Chrome.

I wonder have I misunderstood something in this point?

本文标签： firefoxGetting mouse position in major internet browsers with javascriptStack Overflow