Solved

Using the on() jquery method to attach the "touchstart" event but need to get to screenX

Posted on 2013-11-13
4
716 Views
Last Modified: 2013-11-13
Hi experts,
I'm binding a "touchstart" event to a DOM element. Basically I want to be able to scroll a <ul> based on the user swiping his/her finger on the screen.

To do this I need to get to the screenX and screenY of the touch event. This properties are inside a of a touches array inside a TouchEvent Obj.

How can I get to this properties???

as of now I just want to console.log it so I can see that is working!

//this code logs all the properties of the event
//on the attached file you will see where I want to get at
node.on('touchstart click', function(event){
		event.preventDefault();

		for (var prop in event){
			console.log(event[prop]);
		}
		
	});

Open in new window


I'm attaching an image of the loop that I'm doing for the event obj with arrows showing the data I want to get at

I was thinking I could get to screenX this way:

//but this doesn't work at all..
console.log(event.touches[0].screenX);

Open in new window

objConsoleLogImg.jpg
0
Comment
Question by:vthunder70
  • 2
  • 2
4 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39646224
What about :
event.originalEvent.touches[0].pageX
0
 

Author Comment

by:vthunder70
ID: 39646253
So this works and I'm very happy about that. Before I accept the solution would you mind giving me some info as to why I have to use the originalEvent and is it crossbrowser compatible?

I have been deep in google for 2 days and this is the first I hear about it.

many thanks,
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39646320
check this file : http://code.jquery.com/jquery-1.10.2.js

You can locate :
// Create a writable copy of the event object and normalize some properties
		var i, prop, copy,
			type = event.type,
			originalEvent = event,
			fixHook = this.fixHooks[ type ];

Open in new window


This come from jQuery itself, gage of browser compatibility isn't?
0
 

Author Comment

by:vthunder70
ID: 39646575
I don't understand why they are doing that but I guess that is not the question here... so Thanks you!
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now