TapEvent

Tap event on pure JS

by Yaroslav Samardak

HTML

<div id="container">
    <div id="tap" class="inner"></div>
</div>

CSS

div {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: .1s all linear;
    -moz-transition: .1s all linear;
    -ms-transition: .1s all linear;
    -o-transition: .1s all linear;
    transition: .1s all linear;
    background: rgba(0, 0, 0, .01);
}
div.taped {
    background: rgba(255, 0, 0, .3);
}

div.inner {
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
    background: #FCB117;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
div.inner.taped {
    width: 130px;
    height: 130px;
    margin: -65px 0 0 -65px;
    background: rgba(252, 177, 23, .8);
}

JavaScript

(function (window, document) {
    var addEvent = function (a, b, c) {
        if (!a) {
            return;
        }

        try {
            a.addEventListener(b, c, !1);
        } catch (d) {
            a.attachEvent('on' + b, c);
        }
    };

    var TapEvents = function () {
        var self = this,
            thisIsTap = true,
            touchStartTargetElement = null,
            touchPoint = null,
            touchRadius = 11.5;

        this.init = function () {
            bindEvents();
        };

        function getPoint(e) {
            try {
                return {
                    x: e.touches[0].clientX,
                    y: e.touches[0].clientY
                };
            } catch (ignored) {
                return {
                    x: -1,
                    y: -1
                };
            }
        }

        function isInCircle(center, point, radius) {
            var x = center.x - point.x,
                y = center.y - point.y;
            var r = Math.sqrt(x * x + y * y);
            console.debug(r, radius);
            return r <= radius;
        }

        function bindEvents() {
            addEvent(document, 'touchstart', function (e) {
                thisIsTap = true;
                touchStartTargetElement = e.target;
                touchPoint = getPoint(e);
            });

            addEvent(document, 'touchend', function (e) {
                if (thisIsTap && touchStartTargetElement != null) {
                    var event = getTapEvent(),
                        isCancelled = false;
                    
                    touchStartTargetElement.dispatchEvent(event);
                }
            });

            addEvent(document, 'touchmove', cancelTouch);
            addEvent(document, 'touchleave', cancelTouch);
            addEvent(document, 'touchcancel', cancelTouch);
        }

        function getTapEvent() {
            var eventName;
            if (document.addEventListener ===...