无法在被动事件侦听器中阻止默认值

Question

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?

Answer 1

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;
}

Answer 2

For me

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

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

Answer 3

In plain JS add { passive: false } as third argument

document.addEventListener('wheel', function(e) {
    e.preventDefault();
    doStuff(e);
}, { passive: false });

Answer 4

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/

Answer 5

I am getting this issue when using owl carousal and scrolling the images.

So get solved just adding below CSS in your page.

.owl-carousel {
-ms-touch-action: pan-y;
touch-action: pan-y;
}

or

.owl-carousel {
-ms-touch-action: none;
touch-action: none;
}

Answer 6

仍然能够滚动这对我有用

if (e.changedTouches.length > 1) e.preventDefault();

Answer 7

Adding to Rick Buyers' answer

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;
}

here is how to do it in Javascript:

handlerList = document.getElementsByClassName("sortable-handler");
for (var i=0, len=handlerList.length|0; i<len; i=i+1|0) {
    handlerList[i].style.style.touchAction = "none";
}

Answer 8

just do a check before call preventDefault

event.cancelable && event.preventDefault()

that's it!

More:

touchstart & touchmove default passive true due to perfomance, at most cases, you don't need to change that default optimize.

Answer 9

I worked out a different solution for my code. I needed to disable the passive property for the touchend event. I was using jquery 3.5. You can try the below code:

jQuery.event.special.touchstart = {
        setup: function (_, ns, handle) {
            this.addEventListener('touchend', handle, { passive: !ns.includes('noPreventDefault') });
        }
    };

Answer 10

here is my solution for react. this is for silly react number textfield scrolling problem which causes number change while moving with wheel. when you try to preventDefault onWheel property you get " unable to prevent default inside passive event listener " error. Here we add event listener in creation.

export default function CustomTextField({ ...other }) {
  const ref = useRef(null);

  useEffect(() => {
    const element = ref.current;

    let isNumber = element.querySelector('input').type === 'number'
    if (isNumber) {
      element.addEventListener("wheel", handleWheel);
    }
  }, []);

  const handleWheel = (event) => {
    event.stopPropagation();
  };

  return (
        <TextField
          {...field}
          ref={ref}
          fullWidth
          value={typeof field.value === 'number' && field.value === 0 ? '' : field.value}
          error={!!error}
          helperText={error?.message}
          {...other}
        />

  );
}