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.

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

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