JSFiddle - React, Tailwind, and code Playground

by Evan Sharp

HTML

<div ng-app="offClick">
  <div off-click="idk">
    off click one
  </div>
  <div off-click="idk">
    off click two
  </div>
  <div off-click="idk">
    off click three
  </div>
</div>

JavaScript

'use strict';

angular.module('offClick', []);
angular.module('offClick').directive('offClick', ["$rootScope", "$parse", "OffClickFilterCache", function($rootScope, $parse, OffClickFilterCache) {
  var id = 0;
  var listeners = {};
  // add variable to detect touch users moving..
  var touchMove = false;

  var targetInFilter = function targetInFilter(target, elms) {
    if (!target || !elms) return false;
    var elmsLen = elms.length;
    for (var i = 0; i < elmsLen; ++i) {
      var currentElem = elms[i];
      var containsTarget = false;
      try {
        containsTarget = currentElem.contains(target);
      } catch (e) {
        // If the node is not an Element (e.g., an SVGElement) node.contains() throws Exception in IE,
        // see https://connect.microsoft.com/IE/feedback/details/780874/node-contains-is-incorrect
        // In this case we use compareDocumentPosition() instead.
        if (typeof currentElem.compareDocumentPosition !== 'undefined') {
          containsTarget = currentElem === target || Boolean(currentElem.compareDocumentPosition(target) & 16);
        }
      }

      if (containsTarget) {
        return true;
      }
    }
    return false;
  };

  var offClickEventHandler = function offClickEventHandler(event) {
    // If event is a touchmove adjust touchMove state
    if (event.type === 'touchmove') {
      touchMove = true;
      // And end function
      return false;
    }
    // This will always fire on the touchend after the touchmove runs...
    if (touchMove) {
      // Reset touchmove to false
      touchMove = false;
      // And end function
      return false;
    }
    var target = event.target || event.srcElement;
    angular.forEach(listeners, function(listener, i) {
      var filters = OffClickFilterCache['*'] || [];
      if (listener.elm.id && listener.elm.id !== '') {
        if (OffClickFilterCache['#' + listener.elm.id]) filters = filters.concat(OffClickFilterCache['#' + listener.elm.id]);
      }
      //...