Unable to preventDefault inside passive event listener
JavascriptJqueryHtml Framework-7Javascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
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;
}
Solution 2 - Javascript
For me
document.addEventListener("mousewheel", this.mousewheel.bind(this), { passive: false });
did the trick (the { passive: false }
part).
Solution 3 - Javascript
In plain JS add { passive: false }
as third argument
document.addEventListener('wheel', function(e) {
e.preventDefault();
doStuff(e);
}, { passive: false });
Solution 4 - Javascript
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/
Solution 5 - Javascript
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;
}
Solution 6 - Javascript
To still be able to scroll this worked for me
if (e.changedTouches.length > 1) e.preventDefault();
Solution 7 - Javascript
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";
}
Solution 8 - Javascript
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.
Solution 9 - Javascript
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') });
}
};