I'm using the [email protected] library (with [email protected] and react-konva) to build a simple 2D game.

When testing the app in Chrome all is well. However, when I open Dev Tools and switch to the Device Toolbar (to view the app on mobile-sized viewports) I get an warning of:

Unable to preventDefault inside passive event listener due to target being treated as passive.
See http‍s://www.chromestatus/features/5093566007214080

I've read through the link and researched the {passive: true} option for AddEventListener. However, I'm not directly calling AddEventListener in my code, it's all abstracted through Konva and React.

Also, none of the click events attached to the Konva-generated canvas elements are working in Device Mode. If I exit the Device Toolbar everything works fine and clicking elements functions as intended.

How can I enable passive event listeners in Konva/React? (And is that even the solution?)

I'm using the [email protected] library (with [email protected] and react-konva) to build a simple 2D game.

When testing the app in Chrome all is well. However, when I open Dev Tools and switch to the Device Toolbar (to view the app on mobile-sized viewports) I get an warning of:

Unable to preventDefault inside passive event listener due to target being treated as passive.
See http‍s://www.chromestatus./features/5093566007214080

I've read through the link and researched the {passive: true} option for AddEventListener. However, I'm not directly calling AddEventListener in my code, it's all abstracted through Konva and React.

Also, none of the click events attached to the Konva-generated canvas elements are working in Device Mode. If I exit the Device Toolbar everything works fine and clicking elements functions as intended.

How can I enable passive event listeners in Konva/React? (And is that even the solution?)

• javascript
• dom-events
• konvajs

• 1 I am not sure where these errors are e from. But to enable touch event support you need to add touch listeners in your code. E.g. add "onClick" and "onTap". – lavrton Commented Feb 13, 2017 at 15:33
• I was using onClick previously. Should I replace those (or add) onTap? Does that require the Tappable package? – Brett DeWoody Commented Feb 13, 2017 at 15:55
• You don't need any other packages. You just need to add more listeners (touch events and mouse events are the different events in Konva). – lavrton Commented Feb 13, 2017 at 16:19
• I naively replaced an onClick with onTap and everything started working with no errors. I'm not requiring any package that handles onTap so I'm confused how that's even working. – Brett DeWoody Commented Feb 13, 2017 at 16:42
• You can read more about events in Konva here konvajs.github.io/docs/events/Desktop_and_Mobile.html (and in other related "events" tutorials). List of ALL events you can read here: konvajs.github.io/api/Konva.Shape.html#on – lavrton Commented Feb 13, 2017 at 17:07

2 Answers 2

I had got the same error browser console, I had referred link: https://github./bevacqua/dragula/issues/468 and update touch-action CSS property, It works fine!

Sorry for the trouble, this is a breaking change in Chrome 56 to improve scroll performance. You probably need to add an appropriate touch-action CSS rule to explicitly disable touch scrolling.