Solved

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

Posted on 2013-11-13
4
726 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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Dynamic Dropdowns 15 32
Check ALL SP in database make sure there are no errors 17 43
jquery tab header text 1 23
Change to file doesn't show up 16 51
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

839 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