Touch Or Mouse demonstration

Demonstration of our Touch Or Mouse jQuery plugin (https://gist.github.com/lmeurs/e5db12f0b3ef43f9cd65) detects whether an event has been invoked by a touchscreen or a mouse.

by lmeurs

HTML

<h1>jQuery plugin: <a href="https://gist.github.com/lmeurs/e5db12f0b3ef43f9cd65">Touch Or Mouse</a></h1>

<h2>Detect whether an event has been invoked by a touchscreen or a mouse (opposed to detecting touchscreen support).</h2>

<p>This allows one to completely separate touch events from mouse events while supporting both touchscreen and mouse input <em>at the same time</em> (ideal for ie. tablets with mouses and laptops with touchscreens).</p>

<h2>Demonstration</h2>

<p>The <code>.hovered</code> class is added to / removed from the following links on <code>mouseenter</code> / <code>mouseleave</code> when using a mouse or <code>click</code> when using a touchscreen.</p>

<p class="links">
  <a class="link" href="#">Test link1</a>
  <a class="link" href="#">Test link2</a>
</p>

<h3>Explanation</h3>
<ol>
  <li>This plugin needs to be called on ie. the body element to track <code>touchstart</code> and <code>touchend</code> events, this way the <code>touchend</code> event does not have to be fired on the trigger element (ie. a link or button). Between these two touch events this plugin considers any mouse event to be invoked by touch.</li>
  <li>Mouse events are fired only after <code>touchend</code>, when a mouse event is being fired within the <code>ghostEventDelay</code> (option, 1000ms by default) after <code>touchend</code>, this plugin considers the mouse event to be invoked by touch.</li>
  <li>When clicking on an element using a touchscreen, the element gains the <code>:active</code> state. The <code>mouseleave</code> event is only fired after the element loses this state by ie. clicking on another element. Since this could be seconds (or minutes!) after the <code>mouseenter</code> event has been fired, this plugin keeps track of an element's last <code>mouseenter</code> event: if the last <code>mouseenter</code> event was invoked by touch, the following <code>mouseleave</code> event is also considered to be invoked by touch.</li>
</ol>

<p>Shared as <a...

CSS

body {
  font: 12px Arial;
}

.link {
  display: inline-block;
  padding: 20px;
  background: #eee;
  text-decoration: none;

  -webkit-transition: background-color 250ms;
  transition: background-color 250ms;
}

.link.hovered {
  color: white;
  background: #555;
}

JavaScript

// On DOM ready.
jQuery(function($) {
  // Make body element track touch events.
  var $body = $(document.body).touchOrMouse('init');

  // Bind mouse events to links.
  $('.link')
    .click(myClickCallback)
    .mouseenter(myMouseenterCallback)
    .mouseleave(myMouseleaveCallback);

  // Click callback.
  function myClickCallback(e) {
    var touchOrMouse = $body.touchOrMouse('get', e);

    // If mouse event has been invoked by touch.
    if (touchOrMouse === 'touch') {
      // Toggle .hovered class.
      $(this).toggleClass('hovered');
    }

    // Do not follow the link.
    e.preventDefault();
  }

  // Mouse enter callback.
  function myMouseenterCallback(e) {
    var touchOrMouse = $body.touchOrMouse('get', e);

    // If mouse event has not been invoked by touch.
    if (touchOrMouse === 'mouse') {
      // Add .hovered class.
      $(this).addClass('hovered');
    }
  }

  // Mouse leave callback.
  function myMouseleaveCallback(e) {
    var touchOrMouse = $body.touchOrMouse('get', e);

    // If mouse event has not been invoked by touch.
    if (touchOrMouse === 'mouse') {
      // Remove .hovered class.
      $(this).removeClass('hovered');
    }
  }
});

/*! Touch Or Mouse - v0.2 - 2014-10-10
 * Shared at https://gist.github.com/lmeurs/e5db12f0b3ef43f9cd65
 * Demonstrated at http://jsfiddle.net/lmeurs/uo4069nh
 * Discussed at http://stackoverflow.com/a/26145343/328272
 * Copyright (c) 2014 Laurens Meurs, wiedes.nl; Licensed MIT */
(function(e){"use strict";var t={ghostEventDelay:1e3};var n={init:function(n){var r=this;if(!r.data("touchOrMouse")){r.on("touchstart.touchOrMouse touchend.touchOrMouse",function(t){e(this).data("touchOrMouse").touchEventInProgress=t.type==="touchstart";e(this).data("touchOrMouse").lastTouchEventTimestamp=Date.now()}).data("touchOrMouse",{options:e.extend(t,n||{}),touchEventInProgress:false,lastTouchEventTimestamp:0})}return r},get:function(t){var...