Mouse position not working for FireFox

Question

I am stuck in an issue. I have to fetch mouse positions on firefox browser. However it is not working may be I am doing any mistake in code. So far I have done is given below.

Javascript Code :

function MousePos(event){
        if ($.browser.mozilla == true){ 
             if(typeof event.offsetX === "undefined" || typeof event.offsetY === "undefined"{
                 var targetOffset = $(event.target).offset();
                 event.offsetX = event.pageX - targetOffset.left;
                 event.offsetY = event.pageY - targetOffset.top;
                 alert(event.offsetX + "   " + event.offsetY);
             }
        }
    }

HTML Code :

<div class="paymentTracker" onmouseover="MousePos();">

</div>

The function is working if I show an alert box only but this code having issue. I want mouse positions only on Firefox browser. Thanks in advance.

I have done all of these so far but it is not working and in browser inspect console it is showing undefined. Its all working on other browser if I remove condition of Mozilla. But it is not working for Mozilla only. — kamran Ladhani, Jun 23 '16 at 08:49
http://stackoverflow.com/questions/12704686/html5-with-jquery-e-offsetx-is-undefined-in-firefox — , Jun 23 '16 at 08:53
@Super Cool Handsome Gel Boy thanks for this. I did these changes. Now It is showing NaN on undefined place instead of showing the position on alert box. . — kamran Ladhani, Jun 23 '16 at 09:07
The first answer has two situations. Make sure you are using the javascript one, not the jquery one. — , Jun 23 '16 at 09:14
Yes I used JavaScript one now it is showing alert box but giving undefined still. — kamran Ladhani, Jun 23 '16 at 09:21
I tried and it worked in Firefox. Maybe you are not showing the whole code — , Jun 23 '16 at 09:30

Harshada Chavan · Accepted Answer · 2016-06-23T09:34:46.867

0

try this : I think its not working because its not taking onmouseover function you have defined in html.

$( ".paymentTracker" ).mouseover(function(event) {

             var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
             alert(coords);

});


<div class="paymentTracker"></div>

 <style>
.paymentTracker {width:300px; height:300px;border:1px solid;}
 </style>

heres the fiddle : https://jsfiddle.net/0yptrjdw/

with your code

$( ".paymentTracker" ).mouseover(function(event) {
var targetOffset = $(event.target).offset();
             event.offsetX = event.pageX - targetOffset.left;
             event.offsetY = event.pageY - targetOffset.top;
             alert(event.offsetX + "   " + event.offsetY);


});

edited Jun 23 '16 at 09:34

answered Jun 23 '16 at 09:27

Harshada Chavan

526
3
13

No! note that clientX and offsetX is different, check the link I provided in the comment fyi – Jun 23 '16 at 09:30
clientX and offsetX will give different numbers, and OP wants offsetX! clientX is relatively to the absolute position, offsteX is relatively to the event element. – Jun 23 '16 at 09:33
I added that to my answer as well he can alert all he wants :) – Harshada Chavan Jun 23 '16 at 09:33

Mouse position not working for FireFox

1 Answers1