[Chrome Dev Tools - Mobile] Unable to preventDefault inside passive event listener due to target being treated as passive.

[turnerguo]

Just saw a warning on Latest Chrome Dev Tools - Mobile Mode.

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

Follow this link may help: http://stackoverflow.com/questions/42206645/konvajs-unable-to-preventdefault-inside-passive-event-listener-due-to-target-be

[RByers]

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.

[izzythecubemaster]

Could you possibly provide the correct usage of touch-action that would completely disable touch scrolling on certain elements? "touch-action: none;" doesn't seem to do the trick for me.

[lkmill]

Turns out this is very simple to fix. I havent had time to check which ones of these are actually needed... but i fixed it by changing lines 511 - 517 to

  if (global.navigator.pointerEnabled) {
    crossvent[op](el, pointers[type], fn, { passive: false });
  } else if (global.navigator.msPointerEnabled) {
    crossvent[op](el, microsoft[type], fn, { passive: false });
  } else {
    crossvent[op](el, touch[type], fn, { passive: false });
    crossvent[op](el, type, fn, { passive: false });
  }

See https://www.chromestatus.com/features/5093566007214080 and for details about the recent updates https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener.

[dtapuska]

Seems dragula has some bindings for pointerevents. And those really are the preferred approach albeit I don't know if your use case works correctly with pointer events because perhaps it has a similar issue.

but ultimately I'd recommend changing
if (global.navigator.pointerEnabled)

to actually

if (global.PointerEvent)

since it appears global === window

[RByers]

And touch-action: none should be all you need to disable scrolling on an element (unless you've got some weird case where a descendant of that element has, eg. overflow:auto - you'd have to mark such descendants touch-action: none as well if you want to disable their scrolling). Here's a simple touch-action demo page.

Also note that your use of {passive: false} will be broken on older browsers which don't support EventListenerOptions. If you really want to use that instead of touch-action then you probably want to use feature detedction.

[625alex]

My issue was solved by adding touch-action: none to the drag handle.

[qubiack]

@625alex can you show how you use touch-action: none? I add it into body and it doesn't work during a dragging...

[hunaynrestarted]

My issue was solved by adding touch-action: none to the drag handle.

where did you exactly add it?

[dep-deprecated]

You can also just event.currentTarget.blur() instead of event.preventDefault(). It will unfocus the input when the user starts swiping around, which is perhaps slightly less annoying than a numeric input incrementing without warning.

[tomschreck]

I had this same issue and I fixed it as follows in CSS:

.drag-drop-item
{
  touch-action: none;
}

Simply create a CSS class with touch-action: none for the HTML element that gets dragged/dropped.

[AusDude]

I only had this issue while using the dragula.min.js
As soon as I used dragula.js version, the issue ceased.

[iraklikuku]

And touch-action: none should be all you need to disable scrolling on an element (unless you've got some weird case where a descendant of that element has, eg. overflow:auto - you'd have to mark such descendants touch-action: none as well if you want to disable their scrolling). Here's a simple touch-action demo page.

Also note that your use of {passive: false} will be broken on older browsers which don't support EventListenerOptions. If you really want to use that instead of touch-action then you probably want to use feature detedction.

it is working (for example "react-draggable-list" has not been working in my project (for mobile devices)) Thank you