jQuery 1.7 clientX/pageX undefined

Question

I use jQuery and draggable from jqueryUI. When I update jQuery from 1.6 to 1.7 clientX and pageX attributes disappeared from event variable. Here is an example:

http://jsbin.com/ezulas/7/edit

If in given example jQuery version is changed to 1.6.4 - it starts working. With latest release - both clientX/Y and pageX/Y are not working. I discovered I can use e=e.originalEvent - but that doesn't seems to be the proper solution.

Linwoodlinz

I am having this exact same problem. I think its a new bug dealing with the way it is bound. For example, if you try: $(document).bind('click',function(e){ console.log("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY); }); it totally works fine. Did you log a bug with jquery? – Huber

I didn't log it, I thought someone already noticed such big bug. – Linwoodlinz

Looks like someone did bugs.jquery.com/ticket/10729. The bug is still open and there has been much debate about if it should be fixed and how. – Hin

Answer 1

event.layerX and event.layerY: We have removed these non-standard properties in version 1.7. Although we normally would have gone through a deprecation notice period for these, Chrome version 16 generates a flood of console warning messages on the page. Because of this, we decided to remove them immediately. On platforms that still support these properties, they are available through event.originalEvent.layerX and event.originalEvent.layerY.

Source: http://blog.jquery.com/2011/11/03/jquery-1-7-released/

When you console.log(e); inside your dragstop event handler you can see that all the x/y coordinate data is missing in jQuery 1.7; but it can be accessed in event.originalEvent.

UPDATE

If you look around in the event object you can find pageX/pageY in the origionalEvent property:

$('#test').html(e.originalEvent.pageX+','+e.originalEvent.pageY);

Here is an updated version of your jsbin: http://jsbin.com/ezulas/13/edit

From

Your answer sounds unrelated. In my question I already pointed originalEvent. In jQuery docs you can read, that there are event.pageX and pageY variables, that you CAN USE. And they work with 1.7. But not in my specific case. – Linwoodlinz

What did I miss? If you change e.pageX to e.originalEvent.pageX you get the horizontal location of the event. What more are you looking to do? – From

In jQuery docs is written, that we access pageX by using event.pageX: api.jquery.com/event.pageX But this is not working and I'm wondering about way rather to solve it, than to use workarounds. – Linwoodlinz

Replacing event.pageX with event.originalEvent.pageX worked like a charm for me. Thanks @From – Lozada

Answer 2

I had the same problem and was searching similar threads for quite a while. It is now fairly late, but I hope this will still save some happy coders from despair. I checked the jQuery UI Touch Punch file that I was also using in my project and found how it refers to the x/y position. This is what eventually worked for me:

$('.pages').on('touchstart vmousedown', function(e){
    var this_event_touch_start_Y    = e.originalEvent.changedTouches[0].clientY;
    var this_event_touch_start_X    = e.originalEvent.changedTouches[0].clientX;
});

For reference, here a list of all jQuery files I am using:

• jquery-3.1.1.min.js
• jquery.touchSwipe.min.js
• jquery-ui.min.js
• jquery.ui.touch-punch.min.js
• jquery.mobile-1.4.5.min.js

Douzepers

Answer 3

In the jQuery docs for Event Object it says

The following properties are also copied to the event object, though some of their values may be undefined depending on the event:

altKey, bubbles, button, cancelable, charCode, clientX, clientY, ctrlKey, currentTarget, data, detail, eventPhase, metaKey, offsetX, offsetY, originalTarget, pageX, pageY, prevValue, relatedTarget, screenX, screenY, shiftKey, target, view, which

Which seems to fit what you are saying. In your situation your event does not have pageX and pageY defined.

Hin

But it was defined in jQuery 1.6, don't understand why now it's defined under originalEvent.clientX – Linwoodlinz