{"id":1139,"date":"2012-10-25T16:13:14","date_gmt":"2012-10-25T14:13:14","guid":{"rendered":"http:\/\/blog.kodono.info\/wordpress\/?p=1139"},"modified":"2012-11-11T17:30:42","modified_gmt":"2012-11-11T16:30:42","slug":"detection-et-polyfill-pour-mouseenter-et-mouseleave-javascript","status":"publish","type":"post","link":"https:\/\/blog.kodono.info\/wordpress\/2012\/10\/25\/detection-et-polyfill-pour-mouseenter-et-mouseleave-javascript\/","title":{"rendered":"D\u00e9tection et polyfill pour \u00e9muler mouseenter et mouseleave [JavaScript]"},"content":{"rendered":"

Il semblerait qu’\u00e0 l’heure o\u00f9 j’\u00e9cris ces lignes, les \u00e9v\u00e9nements “mouseenter” et “mouseleave” ne soient pas encore support\u00e9s par la derni\u00e8re version stable de Chrome (alors que FF16 et IE les supportent).
\nD’autres plus anciennes versions de Firefox peuvent aussi \u00eatre impact\u00e9es.
\nMais heureusement il existe un polyfill pour \u00e7a.<\/p>\n

Tout d’abord voici une fonction pour d\u00e9tecter si l’\u00e9v\u00e9nement est support\u00e9 (source<\/a>) :<\/p>\n

\r\n\/\/ source: http:\/\/perfectionkills.com\/detecting-event-support-without-browser-sniffing\/\r\nfunction isMouseEventSupported(eventName) {\r\n  var el = document.createElement('div');\r\n  eventName = 'on' + eventName;\r\n  var isSupported = (eventName in el);\r\n  if (!isSupported) {\r\n    el.setAttribute(eventName, 'return;');\r\n    isSupported = typeof el[eventName] == 'function';\r\n  }\r\n  el = null;\r\n  return isSupported;\r\n}\r\n\r\nisMouseEventSupported(\"mouseenter\"); \/\/ --> true ou false\r\n<\/pre>\n
Maintenant voici le polyfill :<\/p>\n
\r\n\/\/ inspired by : http:\/\/blog.stchur.com\/2007\/03\/15\/mouseenter-and-mouseleave-events-for-firefox-and-other-non-ie-browsers\/\r\n\r\n\/\/ bindEvent is an easy way to create a native binding events\r\n\/\/ @param {DOMElement} element The DOM element related to the event\r\n\/\/ @param {String} eventName An event name just like 'click'\r\n\/\/ @param {Function} fct The function that will be triggered by the event\r\nfunction bindEvent(element, eventName, fct) {\r\n  if (!element) throw new ErrorType(\"The element doesn't exist\");\r\n  \r\n  if (element.addEventListener) {\r\n    \/\/ if it's mouseenter or mouseleave, we want to check the compatibility\r\n    if (eventName === \"mouseenter\" || eventName === \"mouseleave\") {\r\n      if (!isMouseEventSupported(eventName)) {\r\n        switch (eventName) {\r\n          case \"mouseleave\": eventName=\"mouseout\"; break;\r\n          case \"mouseenter\": eventName=\"mouseover\"; break;\r\n        }\r\n        fct=fixMouseEnter(fct);\r\n      }\r\n    }\r\n    element.addEventListener(eventName, fct, false);\r\n  }\r\n  else\r\n    element.attachEvent(\"on\"+eventName, fct);\r\n}\r\n\r\nfunction fixMouseEnter(fct) {\r\n  return function(evt) {\r\n    var relTarget = evt.relatedTarget;\r\n    if (this === relTarget || isChildOf(this, relTarget)) return;\r\n    fct.call(this, evt);\r\n  }\r\n}\r\nfunction isChildOf(parent, child) {\r\n  if (parent === child) return false;\r\n  while (child && child !== parent) child = child.parentNode\r\n  return child === parent;\r\n}\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Il semblerait qu’\u00e0 l’heure o\u00f9 j’\u00e9cris ces lignes, les \u00e9v\u00e9nements “mouseenter” et “mouseleave” ne soient pas encore support\u00e9s par la derni\u00e8re version stable de Chrome (alors que FF16 et IE les supportent). D’autres plus anciennes versions de Firefox peuvent aussi \u00eatre impact\u00e9es. Mais heureusement il existe un polyfill pour \u00e7a. Tout d’abord voici une fonction […]<\/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":[20,33],"tags":[24,155,158],"class_list":["post-1139","post","type-post","status-publish","format-standard","hentry","category-niveau-expert","category-programmation","tag-javascript","tag-niveau-expert","tag-programmation"],"_links":{"self":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1139","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=1139"}],"version-history":[{"count":5,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1139\/revisions"}],"predecessor-version":[{"id":1160,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1139\/revisions\/1160"}],"wp:attachment":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/media?parent=1139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/categories?post=1139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/tags?post=1139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}