J’ai un projet sur lequel j’ai deux \u00e9v\u00e8nements “mouseenter” et “mouseleave” g\u00e9r\u00e9s par jQuery (pour faire le “hover”), et je voulais un comportement similaire sur mobile. Pour ce faire, je voulais qu’un “tap” affiche ce que le “hover” affiche avec la souris, puis qu’un second “tap” permette d’acc\u00e9der au contenu (comme un “clic”). La solution \u00e9tait assez simple, mais j’ai \u00e9t\u00e9 ensuite confront\u00e9 au probl\u00e8me du “scroll”…. en effet il confondait le “scroll” avec un “tap”.<\/p>\n
Pour emp\u00eacher ce comportement, il faut tester si on effectue un “scroll” en s’aidant de J’ai un projet sur lequel j’ai deux \u00e9v\u00e8nements “mouseenter” et “mouseleave” g\u00e9r\u00e9s par jQuery (pour faire le “hover”), et je voulais un comportement similaire sur mobile. Pour ce faire, je voulais qu’un “tap” affiche ce que le “hover” affiche avec la souris, puis qu’un second “tap” permette d’acc\u00e9der au contenu (comme un “clic”). La solution […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","hide_page_title":"","footnotes":""},"categories":[16,13,33,26],"tags":[24,152,158],"class_list":["post-1450","post","type-post","status-publish","format-standard","hentry","category-navigateur","category-niveau-intermediaire","category-programmation","category-web-design","tag-javascript","tag-niveau-intermediaire","tag-programmation"],"_links":{"self":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1450","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/comments?post=1450"}],"version-history":[{"count":1,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1450\/revisions"}],"predecessor-version":[{"id":1451,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1450\/revisions\/1451"}],"wp:attachment":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/media?parent=1450"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/categories?post=1450"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/tags?post=1450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}$(window).scrollTop()<\/code>:<\/p>\n\r\nvar scrollPos=0;\r\n$('#elem').on('mouseenter', function() {\r\n \/\/ affiche quelque chose quand la souris est sur la zone\r\n $(this).addClass('hover');\r\n}).on('mouseleave', function() {\r\n \/\/ cache le contenu lorsque la souris n'est plus dans la zone\r\n $(this).removeClass('hover');\r\n}).on('touchstart', function(event) {\r\n \/\/ lorsqu'on tape avec son doigt on doit r\u00e9cup\u00e9rer la position dans la page\r\n scrollPos=$(window).scrollTop();\r\n}).on('touchend', function(event) {\r\n event.preventDefault();\r\n \/\/ puis ici on v\u00e9rifie que ce n'est pas un scroll\r\n if(Math.abs(scrollPos - $(window).scrollTop()) < 3){\r\n \/\/ si on entre l\u00e0 dedans c'est qu'on a bien effectu\u00e9 un simple \"tap\"\r\n var $this=$(this);\r\n if ($this.hasClass('hover')) {\r\n \/\/ effectue l'action de clic li\u00e9e \u00e0 ce bloc ... c'est donc le second \"tap\"\r\n } else {\r\n \/\/ effectue la m\u00eame op\u00e9ration que lorsque la souris est dans la zone\r\n $this.addClass('hover');\r\n }\r\n }\r\n});\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"