11132 sujets

JavaScript, DOM et API Web HTML5

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)
Personne pour me dire si la dernière syntaxe donnera le même effet qu'un <body ontouchstart=""> ?
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 !)