JSFiddle - React, Tailwind, and code Playground

by Evan Sharp

HTML

<div ng-app="offClick" ng-controller="myCtrl">
  <div off-click="idk()">
    off click one
  </div>
  <div off-click="idk()">
    off click two
  </div>
  <div off-click="idk()" ng-if="showing">
    off click three
  </div>
  <button ng-click="showing = !showing">
  Toggle
  </button>
</div>

JavaScript

'use strict';

angular.module('offClick', []).controller('myCtrl', function($scope){
$scope.showing = true;
$scope.idk = function(){console.log('test');};
});
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 ||...