title: JQuery hover, click and touch combination
body: <p>I would like to show and hide an element using <b>hover, click and touch</b> events. The idea behind this is that you will be able to use the same element for touch devices, devices that use a mouse and  combination devices, like laptops that have touch. So I would need to <b>combine mouse and touch input</b>.
  The problem is that the events influence eachother and multiple events are fired when I use touch causing the element to be shown and hidden over and over again.</p>
  
  <p>How can I get the behaviour I want;</p>
  
  <ul>
  <li>toggle on click and touch</li>
  <li>show on mouseenter</li>
  <li>hide on mouseout</li>
  </ul>
  
  <p>I have tried multiple implementations such as the following and none seem to be stable.</p>
  
  <pre><code> $("#showMe").hide();
   $(document).on('touchstart click mouseenter mouseout', '#thingToTrigger', function (event) {
      event.stopPropagation();
      if (event.handled !== true) {
          $("#showMe").toggle(1000);
          event.handled = true;
      } else {
          return false;
      }
  });
  </code></pre>
  
  <p>Here is the <b>JSFiddle <a href="http://jsfiddle.net/9305f9d7/" rel="nofollow">http://jsfiddle.net/9305f9d7/</a> </b></p>