JSFiddle - React, Tailwind, and code Playground

by James Greene

HTML

<h3>Is `mouseenter` supported?</h3>
<div id="mouseenterResult" class="result"></div>
<h3>Is `mouseleave` supported?</h3>
<div id="mouseleaveResult" class="result"></div>

CSS

.result {
    color: red;
    font-weight: bold;
}

JavaScript

function isMouseEventSupported(eventName) {
  var el = document.createElement("div");
  eventName = "on" + eventName;
  var isSupported = (eventName in el);
  if (!isSupported) {
    el.setAttribute(eventName, "return;");
    isSupported = typeof el[eventName] === "function";
  }
  el = null;
  return isSupported;
}


document.getElementById("mouseenterResult").innerHTML = isMouseEventSupported("mouseenter");
document.getElementById("mouseleaveResult").innerHTML = isMouseEventSupported("mouseleave");