3

I'm trying to display a info box kind of element at the position where the user clicks. I'm listening to 'click' event, a handler function uses mouse click even object's event.pageX and event.pageY to render the info box. This works perfectly in the desktop browser. I tried hitting the page from a mobile client. event.pageX and event.pageY seem to be "NaN". Any idea why??

portion of the handler is as follows.

var pushPinClickEventHandler = function (event) {
    var clickX = event.pageX;
    var clickY = event.pageY;
    //do some thing here
}

edit: adding details about the mouse event object

desktop:

isPrimary: true
isSecondary: false
isTouchEvent: undefined
pageX: 136
pageY: 269

Mobile: 

isPrimary: false
isSecondary: false
isTouchEvent: true
pageX: NaN
pageY: NaN
Adam Jenkins
  • 51,445
  • 11
  • 72
  • 100
Karthikeyan Muthu
  • 41
  • 4
  • how are you binding the event ? Can you make a Jsfiddle test page ? – Lepidosteus Oct 30 '13 at 17:02
  • Are you sure? isn't it just `undefined`? If you try do arithmetic on `undefined`, like: `1 + undefined` you will get `NaN` (not a number). – Halcyon Oct 30 '13 at 17:03
  • I highly doubt that if you do `console.log(event.pageX)` on a native `event` you'll get `NaN` - there's more to the code than you're posting. – Adam Jenkins Oct 30 '13 at 17:05
  • @Lepidosteus i'm using bing maps ajaxv7 api in the page. bound as follows: Microsoft.Maps.Events.addHandler(TmpPushPin, 'click', pushPinClickEventHandler); – Karthikeyan Muthu Oct 30 '13 at 17:19
  • @Adam isNaN(event.pageX) evaluvates to true. – Karthikeyan Muthu Oct 30 '13 at 17:23
  • This might be a bug in either the Bing Maps API or Chrome (I would guess the former, but it's just a guess). Take a look at `event.originalEvent` and see if that object contains a `pageX` property that you can use. Also, it would've been beneficial to say that this is not a browser event, but an API event coming from Bing Maps when you originally asked the question. – Adam Jenkins Oct 30 '13 at 17:34
  • @Adam yeah. that is what i'm doing as a fall back. Was curious about why i was facing this issue in the first place. – Karthikeyan Muthu Oct 30 '13 at 18:40
  • @KarthikeyanMuthu - it's a bug. As to whose...I can't be positive, but I'd guess Bing. – Adam Jenkins Oct 30 '13 at 18:41
  • As adam said this is probably a bug in the Bing api; but if you made a jsfiddle test case it would be a lot easier for us to test instead of merely guessing – Lepidosteus Oct 30 '13 at 18:50

2 Answers2

4

This solution works for me. I use :

`event.changedTouches[0].pageX`  
`event.changedTouches[0].pageY`

in replacement of 

`event.pageX`  
`event.pageY`
lambvig
  • 41
  • 2
1

The solution i've found is to override values of event.pageX and event.pageY with event.originalEvent.x and event.originalEvent.y.

After that, you can get positions calling event.getX(), event.getY().

Iñaki
  • 11
  • 1