JSFiddle - React, Tailwind, and code Playground

by tofeld

HTML

<table>
    <tr class="evtFastbutton evtFirstLine" onclick="('/tofeld/9Lu54yrr/')">
        <td>some Text</td>
    </tr>
    <tr class="evtFastbutton evtSecondLine" onclick="('/tofeld/9Lu54yrr/')">
        <td>some more Text</td>
    </tr>
</table>

CSS

.element_clicked {
    background-color: #EEEEEE !important;
}
td {
    height: 50px;
    width: 200px;
}

JavaScript

(function () {
    var isTouch = "ontouchstart" in window;

    this.FastButton = function (element, handler) {
        this.element = element;
        this.handler = handler;

        element.addEventListener('touchstart', this, false);
        element.addEventListener('click', this, false);
    };


    this.FastButton.prototype.handleEvent = function (event) {
        switch (event.type) {
            case 'touchstart':
                this.onTouchStart(event);
                break;
            case 'touchmove':
                this.onTouchMove(event);
                break;
            case 'touchend':
                this.onClick(event);
                break;
            case 'click':
                this.onClick(event);
                break;
        }
    };

    this.FastButton.prototype.onTouchStart = function (event) {
        event.stopPropagation();

        this.element.addEventListener('touchend', this, false);
        document.body.addEventListener('touchmove', this, false);

        this.startX = event.touches[0].clientX;
        this.startY = event.touches[0].clientY;
    };

    this.FastButton.prototype.onTouchMove = function (event) {

        if (Math.abs(event.touches[0].clientX - this.startX) > 10 || Math.abs(event.touches[0].clientY - this.startY) > 10) {
            this.reset();
        }
    };

    var clickbuster = function () {};

    this.FastButton.prototype.onClick = function (event) {
        event.stopPropagation();
        this.reset();


        if (hasClass(this.element, 'evtFirstLine')) {
            setBackgroundColor(this.element.nextElementSibling);
        } else if (hasClass(this.element, 'evtSecondLine')) {
            setBackgroundColor(this.element.previousElementSibling);
        }

        setBackgroundColor(this.element);
        this.handler(event);
        if (event.type == 'touchend') {
            clickbuster.preventGhostClick(this.startX, this.startY);
        }
    };

    this.FastButton.prototype.reset =...