Develop Reference

Dblclick event handler not responding for apple devices

Currently my application uses a FancyTree jquery plugin, the dblclick event is not working only for apple devices, when running in google chrome developer mode set on iphone7/8 it gives me the following error in console:
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
However when switch off device toolbar, it is working fine.
same as for android and windows devices.
Also installing chrome on apple device will not work.
What can be the problem?
Thank you.
Installing doubletap.js gives no result.
Code from event handler in plugin
.on("click" + ns + " dblclick" + ns, function(event) {
if (opts.disabled) {
return true;
}
var ctx,
et = FT.getEventTarget(event),
node = et.node,
tree = self.tree,
prevPhase = tree.phase;
// self.tree.debug("event(" + event.type + "): node: ", node);
if (!node) {
return true; // Allow bubbling of other events
}
ctx = tree._makeHookContext(node, event);
// self.tree.debug("event(" + event.type + "): node: ", node);
try {
tree.phase = "userEvent";
switch (event.type) {
case "click":
ctx.targetType = et.type;
if (node.isPagingNode()) {
return (
tree._triggerNodeEvent(
"clickPaging",
ctx,
event
) === true
);
}
return tree._triggerNodeEvent(
"click",
ctx,
event
) === false
? false
: tree._callHook("nodeClick", ctx);
case "dblclick":
ctx.targetType = et.type;
return tree._triggerNodeEvent(
"dblclick",
ctx,
event
) === false
? false
: tree._callHook("nodeDblclick", ctx);
}
} finally {
tree.phase = prevPhase;
}
});
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive

This is a bit of an obscure issue in Chrome. It is caused by a change back in Chrome 56 which is intended to improve scroll performance on mobile.
The workaround is to add a CSS rule like this:
#modal_valve
{
touch-action: none;
}
You may need to add it to other elements as well, depending on which elements gets dragged.

Detect mouse on touch screen device

I use the following code to detect whether the device is a touch device or not:
var isTouchDevice = 'ontouchstart' in window || navigator.msMaxTouchPoints;
if(isTouchDevice)
{
$('body').addClass('yes-touch');
}
else
{
$('body').addClass('no-touch');
}
I use this to only show :hover states when it is NOT a touch device (as most touch devices interpret a tap as a hover).
.no-touch .element:hover {
color: red;
}
The problem is, one of our PCs in the office is an all-on-one touch screen PC, which means that when using a mouse the hover states don't occur.
Is there a way to work out whether a mouse is being used on a touch screen device? In other words, it should have the no-touch class applied when the mouse is being used and the yes-touch class applied when the touch screen is being used.

As of today, there is no foolproof ironclad way of doing it. The modernizr folks, pretty much the experts in feature detection, recently had this to say about it:
https://github.com/Modernizr/Modernizr/issues/869#issuecomment-57891034
The end result of all of this is that you cannot detect a mouse use in
a way that would conform to the level of reliability that Modernizr is
credited with. For our intents and purposes, it is a undetectable.
If you, future traveler, wish to attempt to detect a mouse user, then
the following is the best guide I can offer.
Don't. Seriously. Just because a user has a "mouse" doesn't mean that
they don't have multiple other forms of input. You should try really
hard to avoid making any kind of UI/UX decision that changes based
upon the idea of a mouse user being diametrically opposed to a
touchscreen user (or any other kind, for that matter). Make things
universal.
If you have to, and only care about IE 10 and 11, then IE's
PointerEvent would be worth checking out. Support is abysmal, outside
of those two (and presumably future IE versions).
You can attach a
listener for a 'hover' event on the body, and if it is true, then the
user probably has a mouse. The drawback with this approach include
touch events briefly firing hover events on tap/touch, so you could
get false positives.
sniff for mobile user agents. This is a bad idea,
and goes against the very core of Modernizr. Please don't do it.
So to me #1 pretty much sums it up. However, that answers your question but doesn't give you a solution. You mention "one of our PC's in the office..." Is this by chance an internal only application? I've occasionally run across situations where internal special use or one off pages may require some individual treatment for whatever reason (like one of our employees having a touch based AIO with a mouse attached). What I'll do then is append a ?hasmouse onto the end of the url and give the user that link to bookmark. Then inside javascript after your var isTouchDevice but before your if, insert this code to undo it:
if (location.search == '?hasmouse') {
isTouchDevice = false;
}
Again, thats sort of a no frills way for just internal use.

I have been using this for a while and it seems to work reliably. I wounder if it's worth it sometimes, but it does work.
The idea here is to capture actual touchdown events to trigger touch mode and use mousemove to trigger mouse mode. The problem is IE does not trigger touch events, but pointer events. The great thing about pointer events is you can check if it's mouse or touch!
The problem is all other browsers fire a fake mousemove just after a touch event. It's truly maddening!
You can see it work on this codepen
//First check if this is a touch device:
this.isTouch = 'ontouchstart' in window || (navigator.msMaxTouchPoints > 0);
// Some vars we'll need later
var lastTouch = 0
var lastCheck = 0
//Then set up our event listeners:
function initEvents() {
//handle touch/mouse devices detect mouse so that touch is toggled off
if (this.isTouch) {
$(document).on(" touchstart mousemove " + msPointerEvent('move'), function(e) {
e = e.originalEvent
//browser has pointer events
var pe = window.PointerEvent || window.MSPointerEvent
// handle ie pointer events (polyfill functions are at bottom of answer)
if (e.type == msPointerEvent('move')) {
var touchEvent = msPointerType(e) == 'touch'
if (touchEvent)
lastTouch = e.timeStamp;
if (!this.isTouch && touchEvent)
return setupTouch.call(this, true)
else if (this.isTouch && !touchEvent)
return setupTouch.call(this, false)
}
// Handle all other browser touch events
if (e.type == "touchstart") {
console.log('touchstart fired')
lastTouch = e.timeStamp;
if (!this.isTouch)
setupTouch.call(this, true);
}
// test mouse move and set up mouse mode if real
else if (!pe && e.type == "mousemove" && this.isTouch) {
if (realMouseDown.call(this, e)) {
setupTouch.call(this, false)
}
}
}.bind(this));
}
}
initEvents()
// Here is where we get clever. It turns out that the fake mousemove will fire in less than 500ms of the touch so we use that to detect fakes. Then of course do something special for IE:
function realMouseDown(e) {
var touchDif = e.timeStamp - lastTouch
var mouseDif = e.timeStamp - lastCheck
// false mouse event will get fired within 500ms of a touch (touchDif > 500)
// (required for all browsers false mouse after touch event)
var real = touchDif > 500
lastCheck = e.timeStamp;
console.log('real=', real, ' mDif ='+mouseDif, ' tDif ='+touchDif)
return real
}
// Now for some IE polyfill because they cant seem to make up their mind what to do.
// IE pointer event polyfill
function msPointerEvent(type) {
var n = ""
if (window.PointerEvent) // IE 11
n = 'pointer' + type
else if (window.MSPointerEvent) // IE 10
n = 'MSPointer' + type[0].toUpperCase() + type.substr(1);
return n
}
// IE pointer type polyfill
function msPointerType(e) {
var pt = ['zero', 'one', 'touch', 'pen', 'mouse']
return typeof e.pointerType == 'string' ? e.pointerType : pt[e.pointerType]
}
// And finally do what you need...
// make required changes for touch / mouse
var $output = $('#output')
function setupTouch(state) {
console.log('TouchMode=', state)
if (state)
this.isTouch = true
else
this.isTouch = false
$output.html('Touch mode changed to = '+state)
}
//First check if this is a touch device:
this.isTouch = 'ontouchstart' in window || (navigator.msMaxTouchPoints > 0);
// Some vars we'll need later
var lastTouch = 0
var lastCheck = 0
//Then set up our event listeners:
function initEvents() {
//handle touch/mouse devices detect mouse so that touch is toggled off
if (this.isTouch) {
$(document).on(" touchstart mousemove " + msPointerEvent('move'), function(e) {
e = e.originalEvent
//browser has pointer events
var pe = window.PointerEvent || window.MSPointerEvent
// handle ie pointer events (polyfill functions are at bottom of answer)
if (e.type == msPointerEvent('move')) {
var touchEvent = msPointerType(e) == 'touch'
if (touchEvent)
lastTouch = e.timeStamp;
if (!this.isTouch && touchEvent)
return setupTouch.call(this, true)
else if (this.isTouch && !touchEvent)
return setupTouch.call(this, false)
}
// Handle all other browser touch events
else if (e.type == "touchstart") {
console.log('touchstart fired')
lastTouch = e.timeStamp;
if (!this.isTouch)
setupTouch.call(this, true);
}
// test mouse move and set up mouse mode if real
else if (!pe && e.type == "mousemove" && this.isTouch) {
if (realMouseDown.call(this, e)) {
setupTouch.call(this, false)
}
}
}.bind(this));
}
}
initEvents()
// Here is where we get clever. It turns out that the fake mousemove will fire in less than 500ms of the touch so we use that to detect fakes:
function realMouseDown(e) {
var touchDif = e.timeStamp - lastTouch
var mouseDif = e.timeStamp - lastCheck
// false mouse event will get fired within 500ms of a touch (touchDif > 500)
// (required for all browsers false mouse after touch event)
var real = touchDif > 500
lastCheck = e.timeStamp;
console.log('real=', real, ' mDif =' + mouseDif, ' tDif =' + touchDif)
return real
}
// IE pointer event polyfill
function msPointerEvent(type) {
var n = ""
if (window.PointerEvent) // IE 11
n = 'pointer' + type
else if (window.MSPointerEvent) // IE 10
n = 'MSPointer' + type[0].toUpperCase() + type.substr(1);
return n
}
// IE pointer type polyfill
function msPointerType(e) {
var pt = ['zero', 'one', 'touch', 'pen', 'mouse']
return typeof e.pointerType == 'string' ? e.pointerType : pt[e.pointerType]
}
// make required changes for touch / mouse
var $output = $('#output')
function setupTouch(state) {
console.log('TouchMode=', state)
if (state) {
this.isTouch = true
$output.addClass('is-touch')
} else {
this.isTouch = false
$output.removeClass('is-touch')
}
$output.html('Touch mode changed to = ' + state)
}
body {
pointer-evetns: none;
}
#output.is-touch {
background-color: blue;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">
Touch or movethe mose on the result window to change the TouchMode state.
</div>

You can check for type of Pointer Event, that attached to Your object.
Please see example for hover below:
$('.element').on('pointerenter', function (e) {
if (e.pointerType == 'mouse') {
$(this).addClass('hover');
}
}).on('pointerleave', function (e) {
if (e.pointerType == 'mouse') {
$(this).removeClass('hover');
}
});
And use your css:
.element.hover {
color: red;
}

modify hoverIntent to handle touch events on mobiles

Good day all.
I'm having some problems with hoverintent.js a jquery plugin that handle the mouseOver events in a different way than normal.
Due to some complications, I can't modifiy anything but the js of this plugin, but I need to make it compliant with touch events and not only with mouseOver and mouseLeave.
after some debugs, I have managed to recognize this part of the code to be the one to modify:
var handleHover = function(e) {
// next three lines copied from jQuery.hover, ignore children onMouseOver/onMouseOut
var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget;
while ( p && p != this ) { try { p = p.parentNode; } catch(e) { p = this; } }
if ( p == this ) { return false; }
// copy objects to be passed into t (required for event object to be passed in IE)
var ev = jQuery.extend({},e);
var ob = this;
// cancel hoverIntent timer if it exists
if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }
// else e.type == "onmouseover"
if (e.type == "mouseover") {
// set "previous" X and Y position based on initial entry point
pX = ev.pageX; pY = ev.pageY;
// update "current" X and Y position based on mousemove
$(ob).bind("mousemove",track);
// start polling interval (self-calling timeout) to compare mouse coordinates over time
if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}
// else e.type == "onmouseout"
} else {
// unbind expensive mousemove event
$(ob).unbind("mousemove",track);
// if hoverIntent state is true, then call the mouseOut function after the specified delay
if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
}
}
};
// bind the function to the two event listeners
return this.mouseover(handleHover).mouseout(handleHover);
what I've done so far is to make the function working different with mobiles:
var handleHover = function(e) {
isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if(isMobile){
console.log("Ismobile");
}else{
... Same code as before here ...
}
// bind the function to the two event listeners
return this.mouseover(handleHover).mouseout(handleHover);
and now i'm struck. I would like it to "change" its behavior to handle the touch, and not the mouse over event, so on mobiles I will need to touch the element, instead to hovering on it. May someone give me an help? Am I on the right way? Is it the right way to think of it?
unluckily I have only the possibility to change this file and some few more.

Recently i bumped into several problems with changing hoverIntent.js, and ended up in writing my own plugin: hoverDelay.js (much simpler, and less code). see if you can use it, and modify it to your own needs (and maybe contribute the mobile code to it :-)

How to get touchEnd to behave just like mouseUp?

On mouseUp or touchEnd I want to get the reference of the element on which that event happened.
Demo
In this example, you need to click on one element, drag mouse and released over another element. When the mouse is released, that element's background will change to red. My code works correctly for mouse events, but not on touch devices.
When the touchStart is on one element and the finger is released over another element, I'm getting only the reference to the first element.
What I need to change to make the touch events work exactly like the mouse events?
var isMouseDown = false;
var panel1 = document.getElementById( 'panel1' );
var panel2 = document.getElementById( 'panel2' );
panel1.onmousedown = onDocumentMouseDown;
panel1.onmouseup = onDocumentMouseUp;
panel1.onmousemove = onDocumentMouseMove;
panel1.addEventListener( 'touchstart', onDocumentTouchStart, false );
panel1.addEventListener( 'touchmove', onDocumentTouchMove, false );
panel1.addEventListener( 'touchend', onDocumentTouchEnd, false );
panel2.onmousedown = onDocumentMouseDown;
panel2.onmouseup = onDocumentMouseUp;
panel2.onmousemove = onDocumentMouseMove;
panel2.addEventListener( 'touchstart', onDocumentTouchStart, false );
panel2.addEventListener( 'touchmove', onDocumentTouchMove, false );
panel2.addEventListener( 'touchend', onDocumentTouchEnd, false );
function onDocumentMouseDown(event) {
event.preventDefault();
panel1.style.background="#2E442E";
panel2.style.background="#5D855C";
}
function onDocumentMouseUp(event) {
event.preventDefault();
this.style.background="#ff0000";
}
function onDocumentMouseMove( event ) {
}
function onDocumentTouchStart( event ) {
event.preventDefault();
panel1.style.background="#2E442E";
panel2.style.background="#5D855C";
}
function onDocumentTouchMove( event ) {
}
function onDocumentTouchEnd( event ) {
event.preventDefault();
this.style.background="#ff0000";
}

This was a fun question to tackle. Thanks for that.
Here's what I have done. I have modified your touchmove handler as such:
function onDocumentTouchMove(event) {
onDocumentTouchMove.x = event.changedTouches[event.changedTouches.length - 1].clientX;
onDocumentTouchMove.y = event.changedTouches[event.changedTouches.length - 1].clientY;
}
In this handler I'm saving the last co-ordinate that the user moved to. In all probability, this is the point at which the user took his finger, nose, knuckle, stylus, etc off the touch surface. These co-ordinates I then use in the handler for touchend to find the element that surrounds them.
function onDocumentTouchEnd(event) {
event.preventDefault();
var elem = document.elementFromPoint(onDocumentTouchMove.x, onDocumentTouchMove.y);
elem.style.background = "#ff0000";
}
I have utilized the document.elementFromPoint(mdn link) for this purpose. It is one of those golden yet fairly unknown methods provided to us by the CSSOM spec.
Here's the fiddle.

From what it seems, this is intended behavior for touch events. However, I have a workaround!
I haven't tested this extensively, but it seems to work on mobile Safari for at least touchStart and touchEnd events.
Basically what we are going to do is capture all touch events on the document as they are in capture-phase (see http://www.w3.org/TR/DOM-Level-3-Events/). The handler for these events will find the DOM element at this location and re-send the event with the "correct" target.
It seems that the position of touchEnd events is not well defined, so I had to query the changedEvents array to get the last-touched position. I am not sure if this works as-is for touchMove events et al.
function rerouteTouch (evt) {
if (evt.passthrough) { // Ignore if already rerouted
return;
}
evt.stopPropagation();
var newevt = document.createEvent('TouchEvent');
newevt.initTouchEvent (
evt.type,
evt.bubbles,
evt.cancelable,
evt.view,
evt.detail,
evt.screenX,
evt.screenY,
evt.clientX,
evt.clientY,
evt.ctrlKey,
evt.altKey,
evt.shiftKey,
evt.metaKey,
evt.touches,
evt.targetTouches,
evt.changedTouches,
evt.scale,
evt.rotation);
newevt.passthrough = true; // Only reroute once
var target;
var x = (evt.type === 'touchend') ? evt.changedTouches[0].pageX : evt.pageX;
var y = (evt.type === 'touchend') ? evt.changedTouches[0].pageY : evt.pageY;
if (document !== (target = document.elementFromPoint(x, y))) {
target.dispatchEvent(newevt);
}
}
document.addEventListener( 'touchstart', rerouteTouch, true); // Third arg is true to indicate capture-phase
document.addEventListener( 'touchend', rerouteTouch, true);
...
// Your event handlers here
Here's a jsfiddle which works as expected on mobile safari for me: http://jsfiddle.net/DREer/12/

Perhaps if you can include jQuery into your program you can do something like this:
$('#itemId').on('touchEnd',function(){ this.trigger('mouseUp') });
I'm not sure if jQuery out of the box supports this events, but you can always try jQuery movil, hope it helped

Reliable "mouseenter" without jQuery

I've been looking everywhere and I can't seem to find a reliable mouseenter event.
The closest I found was: mouseenter without JQuery
function contains(container, maybe) {
return container.contains ? container.contains(maybe) : !!(container.compareDocumentPosition(maybe) & 16);
}
var _addEvent = window.addEventListener ? function (elem, type, method) {
elem.addEventListener(type, method, false);
} : function (elem, type, method) {
elem.attachEvent('on' + type, method);
};
var _removeEvent = window.removeEventListener ? function (elem, type, method) {
elem.removeEventListener(type, method, false);
} : function (elem, type, method) {
elem.detachEvent('on' + type, method);
};
function _mouseEnterLeave(elem, type, method) {
var mouseEnter = type === 'mouseenter',
ie = mouseEnter ? 'fromElement' : 'toElement',
method2 = function (e) {
e = e || window.event;
var related = e.relatedTarget || e[ie];
if ((elem === e.target || contains(elem, e.target)) &&
!contains(elem, related)) {
method();
}
};
type = mouseEnter ? 'mouseover' : 'mouseout';
_addEvent(elem, type, method2);
return method2;
}
The only issue is that when i run it:
_mouseEnterLeave(ele, 'mouseenter', function(){
console.log('test');
});
I get 40-47ish (different every time) executions at once each time the listener fires.
I tried the Quirksmode one too: http://www.quirksmode.org/js/events_mouse.html#mouseenter
function doSomething(e) {
if (!e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target;
if (tg.nodeName != 'DIV') return;
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
while (reltg != tg && reltg.nodeName != 'BODY')
reltg= reltg.parentNode
if (reltg== tg) return;
// Mouseout took place when mouse actually left layer
// Handle event
}
However this one was extremely unreliable and not only that, it assumed the parent/element was a DIV. This has to be more dynamic. This is for a library/script so I can't include jQuery.
In short, I have an element that is hidden until the mouse moves. Once it moves it appears for as long as the mouse is moving OR if the mouse is hovering over the element itself. Less code would be awesome simply because only WebKit doesn't support mouseenter natively and it feels like a waste to have that huge chunk of code from the first example just to support Chrome for a small UI thing.

Is it possible to just scrap the mouseenter and instead use mousemove instead? That takes care of showing it when the mouse is moving. To make it stay visible when hovered directly on the element, just use CSS instead.
#your_element {
display: none;
}
#your_element:hover {
display: block;
}