无法防止被动事件侦听器内的默认值

我使用的是 Framework7可排序列表，它工作得很好，只是它不会在列表更改时触发事件。

所以我尝试了一些内置的事件:

$('.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');
});

但我得到的只有:

由于目标，无法防止被动事件侦听器内部的默认值 被视为被动的 Https://www.chromestatus.com/features/5093566007214080

我应该查找哪个事件来获得每种排序的更新列表？

277329 次浏览
小开
最佳答案

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/

小开

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

For me 

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

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

小开

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

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

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

To still be able to scroll this worked for me

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

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";
}
小开

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.

小开

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') });
}
};
小开

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


);
}

提交答案