This leads very troubling behaviour. On windows surface PCs, user can click element with screen and touch panel while use cannot scroll element only with screen.
Like most applications, apps should enable multiple devices. In other words use should be able to use both of mouse (including touch panel) and touch device (screen of tablet).
With chrome debugger, you can reproduce easily this problem.
I can use a monkey patch code shown in the lines below. This seems to work without any problem.
if ('ontouchstart' in window) {
// Touch Events
container.addEventListener("touchstart", self.touchStart, false);
if(self.options.preventDefault) container.addEventListener("touchmove", self.touchMoveBubble, false);
document.addEventListener("touchmove", self.touchMove, false);
document.addEventListener("touchend", self.touchEnd, false);
document.addEventListener("touchcancel", self.touchEnd, false);
}
if (window.navigator.pointerEnabled) {
// Pointer Events
container.addEventListener("pointerdown", self.touchStart, false);
if(self.options.preventDefault) container.addEventListener("pointermove", self.touchMoveBubble, false);
document.addEventListener("pointermove", self.touchMove, false);
document.addEventListener("pointerup", self.touchEnd, false);
document.addEventListener("pointercancel", self.touchEnd, false);
}
if (window.navigator.msPointerEnabled) {
// IE10, WP8 (Pointer Events)
container.addEventListener("MSPointerDown", self.touchStart, false);
if(self.options.preventDefault) container.addEventListener("MSPointerMove", self.touchMoveBubble, false);
document.addEventListener("MSPointerMove", self.touchMove, false);
document.addEventListener("MSPointerUp", self.touchEnd, false);
document.addEventListener("MSPointerCancel", self.touchEnd, false);
}
if ('onmousedown' in window) {
// Mouse Events
var mousedown = false;
// omitted
container.addEventListener("mousedown", self.mouseDown, false);
if(self.options.preventDefault) container.addEventListener("mousemove", self.mouseMoveBubble, false);
document.addEventListener("mousemove", self.mouseMove, false);
document.addEventListener("mouseup", self.mouseUp, false);
document.addEventListener('mousewheel', self.mouseWheel, false);
}
if ('onwheel' in window) {
document.addEventListener('wheel', self.mouseWheel, false);
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent