11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] W3C validator (et Google) n'aime pas <body ontouchstart=""

Salut

J'ai des CSS (menu déroulant) qui se déclenche par un :hover et afin que ça fonctionne aussi sur iphone/ipad j'ai du mettre un ontouchstart dans la balise <body> 
<body ontouchstart="">


Mais le W3C validator n'aime pas ça.
Comme je suis un peu maniaque, j'ai trouvé que cette fonction peut être remplacée par 
document.body.addEventListener('touchstart', function(){}, false)
dans le javascript.

Est-ce que le fonctionnement sera strictement identique ?


D'autre part le Google PageSpeed Insights me dit 
Use passive listeners to improve scrolling performance
en m'indiquant la ligne où il y a 
<body ontouchstart="">


La solution semble être d'ajouter 
{passive: true}
aux "event listeners" avec un 
document.addEventListener('touchstart', onTouchStart, {passive: true});


Ne pourrais-je donc pas combiner les deux avec un : 
document.body.addEventListener('touchstart', function(){}, false, {passive: true});
dans le javascript et ainsi enlever définitivement le ontouchstart sur le <body> ?

Est-ce que tout marchera bien sur ios/ipad avec juste cette ligne dans le javascript (chargé en defer) ?

Ralala, tout ça pour plaire au W3C et à Google !
Modifié par kerlutinoec (09 Jun 2021 - 16:52)
Meilleure solution
Modérateur
Salut,


kerlutinoec a écrit :
Est-ce que le fonctionnement sera strictement identique ?

Je pense que oui. C'est en tout cas la bonne facon d'utiliser les event Js.
Tu n'as pas testé ? Si oui, as-tu remarqué des comportement différents ?


kerlutinoec a écrit :
Ne pourrais-je donc pas combiner les deux avec un : 
document.body.addEventListener('touchstart', function(){}, false, {passive: true});
dans le javascript et ainsi enlever définitivement le ontouchstart sur le &lt;body&gt; ?

Si, c'est précisé sur la doc : https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
Je ne dirait pas RTFM; mais bon, c'est bien de lire la doc on y trouve plein de chose ! Smiley biggrin

kerlutinoec a écrit :
Est-ce que tout marchera bien sur ios/ipad avec juste cette ligne dans le javascript (chargé en defer) ?

hop un petit tour sur can i use : https://caniuse.com/mdn-api_eventtarget_addeventlistener_options_passive
c'est assez récent de pouvoir mettre ca en option donc tout dépends de la version iOS que tu vise.
Sinon il y a une section entiere sur ca dans la doc avec des exemple et comment détecter si le passif peut se faire ou pas : https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

kerlutinoec a écrit :
Ralala, tout ça pour plaire au W3C et à Google !

*tout ca pour respecter les standards du web et ne pas faire n'importe quoi Smiley cligne

Bonne aprem ! Smiley smile
Merci pour ta réponse.
Bon je vais me lancer.
Il faudra que je trouve un ancien appareil sous iOS pour tester.

Est-ce que si le {passive: true} n'est pas reconnu, le reste de la fonction marchera quand même ?



(Aparté : le w3C validator ne reconnaît pas "imagesrcset" pour un preload alors que c'est valide !)
Modérateur
kerlutinoec a écrit :
Est-ce que si le {passive: true} n'est pas reconnu, le reste de la fonction marchera quand même ?


_laurent a écrit :
Sinon il y a une section entiere sur ca dans la doc avec des exemple et comment détecter si le passif peut se faire ou pas : https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener


C'est tout le principe de détecter si ca peut se faire ou pas. SI ca peut pas se faire alors on met un fallback. Lis la section "Safely detecting option support" y'a tout expliqué.

Bonne nuit ! Smiley smile
Modifié par _laurent (18 Jun 2021 - 23:13)
Bon j'ai finalement fait le test.
Tout marche bien sur iOS 14 et sur iOS 12. Je n'ai pas la possibilité de tester en dessous mais ça ne semble pas nécessaire.
J'avais un peu peur a cause de ton lien vers CanIUse. Je pense que seul le passive ne fonctionne pas en dessous d'iOS 14 mais le reste de la fonction est exécutée.
Merci pour ton aide.
Sujet clos
Aller à