Fix issue with passive event listeners via jQuery

This commit is contained in:
Nariman Jelveh 2024-05-03 20:21:26 -07:00
parent ecd9d5493f
commit 6bef35b406
2 changed files with 31 additions and 2 deletions

View File

@ -972,7 +972,7 @@ async function UIDesktop(options){
} }
} }
$(el_desktop).on('mousedown touchstart', function(e){ $(el_desktop).on('mousedown touchstart', { passive: true }, function(e){
// dimiss touchstart on regular devices // dimiss touchstart on regular devices
if(e.type==='taphold' && !isMobile.phone && !isMobile.tablet) if(e.type==='taphold' && !isMobile.phone && !isMobile.tablet)
return; return;

View File

@ -68,6 +68,35 @@ const launch_services = async function () {
} }
}; };
// This code snippet addresses the issue flagged by Lighthouse regarding the use of
// passive event listeners to enhance scrolling performance. It provides custom
// implementations for touchstart, touchmove, wheel, and mousewheel events in jQuery.
// By setting the 'passive' option appropriately, it ensures that default browser
// behavior is prevented when necessary, thereby improving page scroll performance.
// More info: https://stackoverflow.com/a/62177358
if(jQuery){
jQuery.event.special.touchstart = {
setup: function( _, ns, handle ) {
this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") });
}
};
jQuery.event.special.touchmove = {
setup: function( _, ns, handle ) {
this.addEventListener("touchmove", handle, { passive: !ns.includes("noPreventDefault") });
}
};
jQuery.event.special.wheel = {
setup: function( _, ns, handle ){
this.addEventListener("wheel", handle, { passive: true });
}
};
jQuery.event.special.mousewheel = {
setup: function( _, ns, handle ){
this.addEventListener("mousewheel", handle, { passive: true });
}
};
}
window.initgui = async function(){ window.initgui = async function(){
let url = new URL(window.location); let url = new URL(window.location);
url = url.href; url = url.href;
@ -84,7 +113,7 @@ window.initgui = async function(){
// Print the version to the console // Print the version to the console
puter.os.version() puter.os.version()
.then(res => { .then(res => {
const deployed_date = new Date(res.deploy_timestamp).toLocaleString(); const deployed_date = new Date(res.deploy_timestamp);
console.log(`Version: ${(res.version)} | Server: ${(res.location)} | Deployed: ${(deployed_date)}`); console.log(`Version: ${(res.version)} | Server: ${(res.location)} | Deployed: ${(deployed_date)}`);
}) })
.catch(error => { .catch(error => {