3

I'm using the Konva.js@1.3.0 library (with React@15.4.2 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.com/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?)

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Brett DeWoody
  • 59,771
  • 29
  • 135
  • 184
  • 1
    I am not sure where these errors are come from. But to enable touch event support you need to add touch listeners in your code. E.g. add "onClick" and "onTap". – lavrton Feb 13 '17 at 15:33
  • I was using `onClick` previously. Should I replace those (or add) `onTap`? Does that require the Tappable package? – Brett DeWoody Feb 13 '17 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 Feb 13 '17 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 Feb 13 '17 at 16:42
  • You can read more about events in Konva here http://konvajs.github.io/docs/events/Desktop_and_Mobile.html (and in other related "events" tutorials). List of ALL events you can read here: http://konvajs.github.io/api/Konva.Shape.html#on – lavrton Feb 13 '17 at 17:07

2 Answers2

1

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

Ansari Maksud
  • 316
  • 2
  • 5
  • 20
0

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.

Rick Byers
  • 3,136
  • 2
  • 16
  • 13