JSFiddle - React, Tailwind, and code Playground

by salomvary

HTML

<a id="bottom" href="http://example.com">
</a>
<a id="top" href="#">
</a>
<pre id="log">
</pre>

CSS

#top {
    background-color: red;
}
#bottom {
    background-color: blue;
}
a {
    position: absolute;
    width: 100px;
    height: 100px;
    display:block; 
    left: 200px;
}

JavaScript

/**
 * energize.js v0.1.0
 *
 * Speeds up click events on mobile devices.
 * https://github.com/davidcalhoun/energize.js
 */

(function() {  // Sandbox
  /**
   * Don't add to non-touch devices, which don't need to be sped up
   */
  if(!('ontouchstart' in window)) return;

  var lastClick = {},
      isThresholdReached, touchstart, touchmove, touchend,
      click, closest;
  
  /**
   * isThresholdReached
   *
   * Compare touchstart with touchend xy coordinates,
   * and only fire simulated click event if the coordinates
   * are nearby. (don't want clicking to be confused with a swipe)
   */
  isThresholdReached = function(startXY, xy) {
    return Math.abs(startXY[0] - xy[0]) > 5 || Math.abs(startXY[1] - xy[1]) > 5;
  };

  /**
   * touchstart
   *
   * Save xy coordinates when the user starts touching the screen
   */
  touchstart = function(e) {
    this.startXY = [e.touches[0].clientX, e.touches[0].clientY];
    this.threshold = false;
  };

  /**
   * touchmove
   *
   * Check if the user is scrolling past the threshold.
   * Have to check here because touchend will not always fire
   * on some tested devices (Kindle Fire?)
   */
  touchmove = function(e) {
    // NOOP if the threshold has already been reached
    if(this.threshold) return false;

    this.threshold = isThresholdReached(this.startXY, [e.touches[0].clientX, e.touches[0].clientY]);
  };

  /**
   * touchend
   *
   * If the user didn't scroll past the threshold between
   * touchstart and touchend, fire a simulated click.
   *
   * (This will fire before a native click)
   */
  touchend = function(e) {
    // Don't fire a click if the user scrolled past the threshold
    if(this.threshold || isThresholdReached(this.startXY, [e.changedTouches[0].clientX, e.changedTouches[0].clientY])) {
      return;
    }
    
    /**
     * Create and fire a click event on the target element
     * https://developer.mozilla.org/en/DOM/event.initMouseEvent
     */
    var touch = e.changedTouches[0],
     ...