Develop Reference

How can I make an entire row clickable? [duplicate]

is there a touch equivalent of the mouseenter.
I would like to detect if user slide on my DIV.
I prefer a solution depending directly on the target element not on a parent element with recounting positions etc.
The site: http://dizzyn.github.io/piano-game/ - works fine with mouse (mouse down and slide; not working with touch slide)
Thank you

2019: Yes-ish: Using pointerenter.
BUT, by default, a touch (or mouse down) causes the element to 'capture' the pointer, preventing further pointerleave/enter events unless you explicitly release the capture.
Moreover, you'll want to set touch-action:none on relevant elements to avoid the browser intercepting touches for default pan/zoom etc.
Example:
CSS:
*{ touch-action: none; }
JS:
let div = document.querySelector("div")
div.addEventListener("pointerdown",(e)=>{
console.log("down")
console.log("attempt release implicit capture")
div.releasePointerCapture(e.pointerId) // <- Important!
})
div.addEventListener("pointerenter",(e)=>{
console.log("enter")
})
div.addEventListener("pointerleave",(e)=>{
console.log("leave")
})
Works in Chrome at least. Not so much in Mobile Safari 13 beta though... According to the w3c specs, I'm fairly certain it should work this way. Maybe when iOS 13 is officially released we'll be in the clear. [I've filed a bug and looks like it's being attended to.]
[Update: iOS 13 issue fixed. Should work in Chrome/FF/Safari]

Look into these events:
touchstart Triggers when the user makes contact with the touch surface and creates a touch point inside the element the event is bound to.
touchmove Triggers when the user moves the touch point across the touch surface.
touchend Triggers when the user removes a touch point from the surface. It fires regardless of whether the touch point is removed while inside the bound-to element, or outside, such as if the user's finger slides out of the element first or even off the edge of the screen.
touchenter Triggers when the touch point enters the bound-to element. This event does not bubble.
touchleave Triggers when the touch point leaves the bound-to element. This event does not bubble.
touchcancel Triggers when the touch point no longer registers on the touch surface. This can occur if the user has moved the touch point outside the browser UI or into a plugin, for example, or if an alert modal pops up.
Specifically touchenter and touchleave.
Source: http://www.javascriptkit.com/javatutors/touchevents.shtml

For anyone who is trying to handle touch events in a web app here is helpful documentation W3C - Touch Events which explains the events in detail and how they are handled.
WC3 states:
If a Web application can process touch events, it can intercept them, and no corresponding mouse events would need to be dispatched by the user agent. If the Web application is not specifically written for touch input devices, it can react to the subsequent mouse events instead.
In short:
You can merely handle mouse events relative to touch events instead of handling both touch and mouse events.

I just wanted to say thank you to the previous poster. His suggestion worked perfectly. And I've been struggling to find a solution to this for weeks. If you're using Svelte within your pointerdown handler function I would suggest using:
const pointerDownHandler = (event) => {
// whatever logic you need
event.target.releasePointerCapture(event.pointerId);
}
He's accurate in saying this part is key. It will not work without it.

Answered this at Touchenter/Touchleave question.
Check please.
https://stackoverflow.com/a/61179966/835753

I will make a shot clarifying for Ian's answer:
Equivalent for mouseenter event is pointerenter event. But it will not work out of the box. To make it work you should:
Add to parent element pointerdown event listener with releasePointerCapture method
div.addEventListener("pointerdown",(e) => e.target.releasePointerCapture(e.pointerId))
Add to parent and to your element touch-action: none CSS property.
Enjoy :)

holding a button touched on smartphone causes the button element to be selected

I have studied my earlier problem with onmousedown and ontouchstart, and I now realized that with smartphones (at least with android), holding the finger touch pressed without moving normally causes the element to be selected. Whereas, with a mouse, holding the click pressed works perfectly fine.
Now, my problem is that my goal is that the user has to do some effort in order to make a stack grow, and for this purpose, holding the mouse click pressed over time is the effort. So I am thinking now, that maybe a smartphone would ideally have some other design of effort, like moving the finger or something.
Anyway, if I would still continue trying to replicate this mouse-logic with the finger touch, would I have to somehow tell the browser something like 'holding touch pressed does not mean selecting an element/this element'?
Many thanks!

On iOS at least you can use -webkit-user-select: none to prevent this behaviour. I tested this out on an iPhone in person.

Detect MacBook trackpad two-finger tap with JavaScript/jQuery

I wonder if there's any way to detect if the user made a two-finger tap on the MacBook trackpad with JavaScript or jQuery. In one of the projects I'm detecting right mouse click with JavaScript and using it for some actions. It actually doesn't work when you make a double finger tap on a trackpad. While in action that works as a right click, but JavaScript can't detect it like so.
Any clues?

You can use the mouse events button property - MDN reference
A value of 1 would be the indicator of a left click
A value of 2 would be the indicator of a right click.
Demo jsFiddle

unifying touch and click events

I'd assume this question has been asked to death, but I'm not finding anything good.
What I'd like is a unified set of events that span devices. I know the mapping isn't always 1 to 1, but just something that covers the basics like:
ignores/disables hover events/styles on a touch device
maps a touchstart to a mousedown
similarly, touchend to mouseup
tap to click
etc...
maybe even touch, hold 1s, touchmove to dragstart...
I haven't thought through all the specifics. And of course device specific events like hover on a desktop, or swipe on a tablet, can't be translated and should just be ignored if not supported.
Anybody know of a library that will do this. Preferably an invisible jQuery patch.
Thanks.

jQuery Mobile does exactly this, amongst many other things.
See their documentation on virtual mouse events, which:
... provide a set of "virtual" mouse events that attempt to abstract away mouse and touch events

JavaScript: Capturing right click and disabling menu only within certain element

I have coded a jquery script where there is a small grid on screen and using drag and drop users can place tiles on the grid (snaps in place). Currently if you hover over a tile it fades in the option to rotate, but I would much prefer it if you could right click to rotate (making it more natural). I understand blocking right click completely is often frowned upon so was wondering if it was possible just within a particular element, then capturing that event, doing something in JS and disabling the context menu? - that works in every browser.
On a side note, currently I am using jQuery for effects and custom javascript for drag and drop, is it worth looking at a jQuery plugin for drag and drop?
Many thanks,

For capturing the right click, you can use this jquery:
$('#gridID').bind('contextmenu', function(e) {
// do stuff here instead of normal context menu
return false;
});
This works in chrome, firefox, and safari. Haven't tested IE. Works in IE too. Only caveat is it doesn't work in Opera apparently. So if you can live with that...

I'm not a fan of using the right mouse button on web pages. However, if you really want to do it, you could trap the right mouse button as described here. You could block the right mouse button (in other words return false in your event handler) conditionally if the mouse is over your grid cells.
Regarding your bonus question: jquery ui has drag & drop functionality. It's probably easier to use that than rolling your own.

"is it worth looking at a jQuery plugin for drag and drop?"
Only if you don't intend your application to be used on the iPhone O.S with safari, i.e. including iPad, see Safari Web Content Guide: Handling Events