Develop Reference

Determine touch position on tablets with JavaScript

I have an object with the name "element". If somebody touches the tablet, I would like to return the x and y coordinates of the touch position relative to the object, i. e. the upper left corner of the object has the coordinates x=0 and y=0.
I know how to implement this on desktops:
$(function() {
$(document).mousedown(function(e) {
var offset = $("#element").offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
alert(relativeX+':'+relativeY);
$(".position").val("afaf");
});
});
So the word "mousedown" should be replaced by "touchstart", I guess. However, it still doesn't work.
How do I change the above code such that it works on tablets with "touchstart" instead of "mousedown"?

UPDATE: See Daniel Lavedonio de Lima's answer below
You have to explicitly pull a touches object out of the event, it doesn't contain the coordinates directly. Look at line two of the code below.
Here is the code I always use to get touch/pointer coordinates:
if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
x = touch.pageX;
y = touch.pageY;
} else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') {
x = e.clientX;
y = e.clientY;
}
Put this inside an event listener that listens for any or all of those events and add your offset calculation and this should work.

Christopher Reid's answer almost worked for me, but I had to make a few ajustments because originalEvent property was not part of the event when I was testing in Google Chrome version 81.0.4044.138 and Mozila Firefox version 76.0.1.
Since I found some answers that use directly the event and other that uses event.originalEvent property, I added a check to use the first if the latter is undefined.
So instead of:
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
I used:
var evt = (typeof e.originalEvent === 'undefined') ? e : e.originalEvent;
var touch = evt.touches[0] || evt.changedTouches[0];
So the full answer then becomes:
if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){
var evt = (typeof e.originalEvent === 'undefined') ? e : e.originalEvent;
var touch = evt.touches[0] || evt.changedTouches[0];
x = touch.pageX;
y = touch.pageY;
} else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') {
x = e.clientX;
y = e.clientY;
}

Normally you would use e.g. e.touches[0].clientX to handle touch events
A non jquery solution, Assuming you have the following HTML
<div id="touchme" style="width: 200px; height: 200px; background: blue;">
And script
document.getElementById("touchme").addEventListener("touchstart",
function clicked(e) {
var br = document.getElementById("touchme").getBoundingClientRect();
// x & y are relative to the clicked element
var x = e.touches[0].clientX - br.left;
var y = e.touches[0].clientY - br.top;
console.log("x: " + x + " y: " + y);
});
Note the following script handles only the first (of all the possible) touch input

Try this:
$(function(){
$('body').on('touchstart', function(e) {
var offset = $("#element").offset();
var t = e.targetTouches.length > 0 ? e.targetTouches.item(0) : e.touches.item(0);
var relativeX = t.pageX - offset.left;
var relativeY = t.pageY - offset.top;
console.log(relativeX+':'+relativeY);
$(".position").val("afaf");
});
});

PointerEvent supports mouse and touch both.
For example, let's see Sortable.js.
Bind events #L423
el.addEventListener('pointerdown', handler);
Get coords #L574
let touch = (evt.touches && evt.touches[0]) || (evt.pointerType && evt.pointerType === 'touch' && evt);
let clientX = (touch || evt).clientX;
let clientY = (touch || evt).clientY;

I adapted the Domenico solution to move the camera on pc and mobile for threeJS without orbitcontrols:
window.addEventListener("touchmove", function clicked(e) {
cursor.x = e.touches[0].clientX / sizes.width - 0.5
cursor.y = -(e.touches[0].clientY / sizes.height - 0.5)});

In case you have some built-in scroll, you should do it as follows:
const rect = event.target.getBoundingClientRect();
x = event.targetTouches[0].pageX - (rect.left + document.documentElement.scrollLeft);
y = event.targetTouches[0].pageY - (rect.top + document.documentElement.scrollTop);

Firefox won't handle event despite passing through function

I'm trying to get a page to have cross browser support, however I keep getting stuck on Mozilla Firefox. I have IE and Chrome working though. The code is:
function positiontip(e){
var e = window.event ? event : e;
if (enabletip) {
var curX;
var curY;
if (e.pageX || e.pageY) {
curX = e.pageX;
curY = e.pageY;
} else if (e.clientX || e.clientY) {
curX = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
curY = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
When ever I try to use the code, Firefox console spits out an error that
e is undefined "if (e.pageX || e.pageY) {"
I have tried calling the function via
positiontip();
and
positiontip(event);
But neither are working.
any ideas?

Try replacing var e = window.event ? event : e; with e = e || window.event;

Nevermind. The problem was that the function positiontip() was called in another function and the other function was being passed the event. I had to changed the html to pass the event to showtooltip() [the upper function] that then passed the event to positiontip().

Detecting offset of an element on scroll in javascript / jQuery

I am looking to calculate the distance between an element and the top of the document window. On scroll I am able to get the initial value but it does not change. How can I find this value and what the number has changed to on scroll?
JS:
$(function() {
$(window).scroll(function() {
var h1 = $("h1");
console.log(h1.offset().top)
});
});
HTML:
<div id="cover">
<h1>hello sir</h1>
</div>

Compare the offset of the <h1> element to how far down the page the user has scrolled. The $(window).scrollTop() function will get you the amount the user has scrolled down so:
$(window).scroll(function() {
var $h1 = $("h1");
var window_offset = $h1.offset().top - $(window).scrollTop();
});

If you hate arithmetic (and extra function calls), this should do the trick:
$(function() {
var h1 = document.getElementsByTagName("h1")[0];
$(window).scroll(function() {
console.log(h1.getBoundingClientRect().top);
});
});
This is exactly what getBoundingClientRect() was made for.

You can use this function to get the scroll offset of the window:
function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
//DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
return [ scrOfX, scrOfY ];
}
Then you can use the offsets in your function to determine the real position of your element:
$(function() {
$(window).scroll(function() {
var h1 = $("h1");
var offs = getScrollXY();
console.log(h1.offset().top - offs[1]);
});
});
Theoretically, this should work in all browsers, but, frankly, I didn't do too much testing.

click mouse position with scroll in javascript

I have code to get x-y coordinates when the browser scrolls:
left1 = window.event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
top1 = window.event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
This is working in IE7, but not in Mozilla Firefox 3.5.19. How can I get it working in Firefox?

The following JS works in IE 8 and firefox 3.6.17
function getScrollingPosition()
{
var position = [0, 0];
if (typeof window.pageYOffset != 'undefined')
{
position = [
window.pageXOffset,
window.pageYOffset
];
}
else if (typeof document.documentElement.scrollTop
!= 'undefined' && document.documentElement.scrollTop > 0)
{
position = [
document.documentElement.scrollLeft,
document.documentElement.scrollTop
];
}
else if (typeof document.body.scrollTop != 'undefined')
{
position = [
document.body.scrollLeft,
document.body.scrollTop
];
}
return position;
}
This article also may help.
http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html

Remember that the click event is handled differently in Mozilla than it is in internet explorer. Also they hold different ways of attaining the position of the cursor location. This is a very easy google search to get the specifics on either.
var IE = document.all ? true : false; // check to see if you're using IE
if (IE) //do if internet explorer
{
cursorX = event.clientX + document.body.scrollLeft;
cursorY = event.clientY + document.body.scrollTop;
}
else //do for all other browsers
{
cursorX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
cursorY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
Also note that you should have something like the following in your initialization code:
if (window.Event) {
if (window.captureEvents) { //doesn't run if IE
document.captureEvents(Event.MOUSEMOVE);
}
}
document.onmousemove = refreshCursorXY;
On the click side of things as I said there is differences in what value the click is attributed between browsers. For example, this check should happen in your click event (that you send e, the event, to). e will not be sent by I.E. so we do it like so:
//internet explorer doesn't pass object event, so check it...
if (e == null)
{
e = window.event;
}
//1 = internet explorer || 0 = firefox
if ((e.button == 1 && window.event != null || e.button == 0))
And again, there are many differences between IE and other browsers, thus there is much documentation. Google searches can do wonders if you require further information on the subject.

Only IE puts the event information in the global window object. All other browsers follow the W3C recommendation that event information be passed to the listener callback registered on an element. You will also need to use element.addEventListener() instead of element.attachEvent(). See the addEventListener() documentation on the Mozilla Developer Network.

Event is undefined in IE6 but works fine in Firefox, Chrome etc

IE6 is getting to be pain but it still makes up (apparently) a good chunk of the browser market share, so I need to make this work.
function getPosition(e)
{
e = e || window.event;
var cursor = {x:0, y:0};
if (e.pageX || e.pageY)
{
cursor.x = e.pageX;
cursor.y = e.pageY;
}
else
{
var dex = document.documentElement;
var b = document.body;
cursor.x = e.clientX + (dex.scrollLeft || b.scrollLeft) - (dex.clientLeft || 0);
cursor.y = e.clientY + (dex.scrollTop || b.scrollTop) - (dex.clientTop || 0);
}
return cursor;
}
function outCursor(e){
var curPos = getPosition(e);
alert(curPos);
}
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove = outCursor;
IE is complaining about the Event in window.captureEvents(Event.MOUSEMOVE);
'Event' is undefined.

I think ie6 doesn't supports captureEvents. So try
if (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE);
}

Try running the script without window.captureEvents(Event.MOUSEMOVE);. I don't think it is necessary. Also, like someone mentioned change the window.onmousemove to document.onmousemove
Also here is a good resource on writing this kind of script http://www.quirksmode.org/js/events_properties.html#position