Unable to preventDefault inside passive event listener

问题

I\'m using Framework7 sortable list and it works well, just that it doesn\'t trigger an event when the list is changed.

So I\'m trying a few built-in 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:

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

Which event should I look for to get the updated list on every sort?

回答1:

To handle sortable list in Framework7 when user release currently sorting element in 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/

回答2:

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

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

回答3:

For me

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

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

来源：https://stackoverflow.com/questions/42101723/unable-to-preventdefault-inside-passive-event-listener