furf / jquery-ui-touch-punch

A duck punch for adding touch events to jQuery UI
http://touchpunch.furf.com/
3.51k stars 1.33k forks source link

Has stop working in chrome after update? #309

Open ghost opened 6 years ago

ghost commented 6 years ago

After the last update of chrome (computer version) this plugin has stop working... testing the oficial website examples http://touchpunch.furf.com in mozilla works (same problem in Edge) is still working on touch devices, but using chrome (after the last update), seems not not to respond for example “drag and drop” or the other examples.

Tested on windows version (computer) connected to a Interactive Board Display, where worked fine until this update On Android tablet works fine.

Has anyone experience the same issue?

datalus commented 6 years ago

Hey @oscarabilleira ...

I think this library is largely unmaintained (don't quote me on that, I could be wrong!), but here in the touch punch code: https://github.com/furf/jquery-ui-touch-punch/blob/4bc009145202d9c7483ba85f3a236a8f3470354d/jquery.ui.touch-punch.js#L14 you'll need to update that line since Chrome 70+ removed the ontouch/touch events.

I've changed it to $.support.touch = 'ontouchend' in document || navigator.maxTouchPoints > 0;

Hopefully they'll continue to support that property off the navigator object going forward ;)

ghost commented 6 years ago

Thanks...

I have made this changes but doesnt’t solve the problem

mykophil commented 6 years ago

Thanks. Same here.

datalus commented 6 years ago

What device are you using? I was testing with a Chromebook C100PA. I was just using the draggable function from jquery UI for setting up our elements and it's working for me.

To clear up some confusion: They just removed the event property names from the window/document/element objects, so any feature detection like the above mentioned line will fail. The events still fire so if you bind them after detection it should resume proper behavior.

Blog post detailing change: https://blog.chromium.org/2018/09/chrome-70-beta-shape-detection-web.html

ghost commented 6 years ago

What device are you using? I was testing with a Chromebook C100PA. I was just using the draggable function from jquery UI for setting up our elements and it's working for me.

To clear up some confusion: They just removed the event property names from the window/document/element objects, so any feature detection like the above mentioned line will fail. The events still fire so if you bind them after detection it should resume proper behavior.

Blog post detailing change: https://blog.chromium.org/2018/09/chrome-70-beta-shape-detection-web.html

I’m using it in a “interactive board conected to a windows computer” (tested on chrome under android or ios devices works fine)

jbuckshin commented 6 years ago

Fix specified by @datalus worked for me. Device is Dell P2418HT + win7 + chrome 70

ghost commented 6 years ago

This is probably overkill, but this worked for me (Surface + win10)

$.support.touch = ('ontouchstart' in document || 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0);
ghost commented 6 years ago

This is probably overkill, but this worked for me (Surface + win10)

$.support.touch = ('ontouchstart' in document || 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0);

I have tested this too and it doesn’t work

jeongcatfish commented 5 years ago

Hey @oscarabilleira ...

I think this library is largely unmaintained (don't quote me on that, I could be wrong!), but here in the touch punch code:

jquery-ui-touch-punch/jquery.ui.touch-punch.js

Line 14 in 4bc0091

$.support.touch = 'ontouchend' in document; you'll need to update that line since Chrome 70+ removed the ontouch/touch events. I've changed it to $.support.touch = 'ontouchend' in document || navigator.maxTouchPoints > 0;

Hopefully they'll continue to support that property off the navigator object going forward ;)

It works!! thank you I've been looking for this solution. and it's really helpful :)

abidCharlotte49er commented 5 years ago

Oscarabilleira's suggestion worked. I remember we had to use MaxTouchPoints property in some other plugin where touch events are not registering. People using min version copy paste below script and try. Thanks

!function (a) { function f(a, b) { if (!(a.originalEvent.touches.length > 1)) { a.preventDefault(); var c = a.originalEvent.changedTouches[0], d = document.createEvent("MouseEvents"); d.initMouseEvent(b, !0, !0, window, 1, c.screenX, c.screenY, c.clientX, c.clientY, !1, !1, !1, !1, 0, null), a.target.dispatchEvent(d) } } if (a.support.touch = ('ontouchstart' in document || 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0), a.support.touch) { var e, b = a.ui.mouse.prototype, c = b._mouseInit, d = b._mouseDestroy; b._touchStart = function (a) { var b = this; !e && b._mouseCapture(a.originalEvent.changedTouches[0]) && (e = !0, b._touchMoved = !1, f(a, "mouseover"), f(a, "mousemove"), f(a, "mousedown")) }, b._touchMove = function (a) { e && (this._touchMoved = !0, f(a, "mousemove")) }, b._touchEnd = function (a) { e && (f(a, "mouseup"), f(a, "mouseout"), this._touchMoved || f(a, "click"), e = !1) }, b._mouseInit = function () { var b = this; b.element.bind({ touchstart: a.proxy(b, "_touchStart"), touchmove: a.proxy(b, "_touchMove"), touchend: a.proxy(b, "_touchEnd") }), c.call(b) }, b._mouseDestroy = function () { var b = this; b.element.unbind({ touchstart: a.proxy(b, "_touchStart"), touchmove: a.proxy(b, "_touchMove"), touchend: a.proxy(b, "_touchEnd") }), d.call(b) } } }(jQuery);

ghost commented 5 years ago

I had the same problem with Chrome but was able to make it work again by adjusting about://flags "Touch Events API" set to "Enabled" rather than "Default/Automatic"

littlecastrum commented 5 years ago

I had the same problem with Chrome but was able to make it work again by adjusting about://flags "Touch Events API" set to "Enabled" rather than "Default/Automatic"

This worked for me also