Unable to prevent default inside passive event listener

Question

I use Framework7's sort list , and it works well, simply because it does not raise an event when the list changes.

So, I'm trying a few inline events:

$('.sortable-handler').on('touchstart', function (e) { e.preventDefault(); alert('touchstart'); }); $('.sortable-handler').on('touchmove', function (e) { e.preventDefault(); console.log('touchmove'); }); $('.sortable-handler').on('touchcancel', function (e) { e.preventDefault(); console.log('touchcancel'); }); $('.sortable-handler').mouseleave(function (e) { e.preventDefault(); console.log('mouseleave'); }); 

.. but all I get is:

It is not possible to prevent detection inside a passive event listener because the target is considered passive. See https://www.chromestatus.com/features/5093566007214080

What event should I look for to get an updated list in each view?

Answer 1

To handle the sorted list in Framework7, when the user releases the current sorting element in a new position, you can use this code:

  $$('li').on('sortable:sort',function(event){ alert("From " + event.detail.startIndex + " to " + event.detail.newIndex); }); 

Fiddle: https://jsfiddle.net/0zf5w4y7/

Answer 2

See this blog . If you call preventDefault on every touchstart , then you should also have a CSS rule to disable touch scrolling, for example

 .sortable-handler { touch-action: none; } 

Answer 3

For me

 document.addEventListener("mousewheel", this.mousewheel.bind(this), { passive: false }); 

did the trick (part { passive: false } ).