JSFiddle - React, Tailwind, and code Playground

by zzzzBov

HTML

<div id="test">Example</div>

CSS

#test {
    cursor: default;
}

JavaScript

(function ($) {
    "use strict";
    $.event.special.mousehold = {
        setup: function () {
            var data,
                over,
                $this;
            data = {
                timeout: null,
                interval: null,
                timeoutCallback: function () {
                    data.interval = setInterval(data.intervalCallback, 50);
                },
                intervalCallback: function () {
                    if (over) {
                        $this.trigger('mousehold');
                    }
                },
                mousedownCallback: function (e) {
                    e.preventDefault();
                    data.timeout = setTimeout(data.timeoutCallback, 200);
                },
                mouseenterCallback: function () {
                    over = true;
                },
                mouseleaveCallback: function () {
                    over = false;
                },
                mouseupCallback: function () {
                    clearTimeout(data.timeout);
                    clearInterval(data.interval);
                }
            };
            $this = $(this);
            $this.on({
                'mousedown.mousehold': data.mousedownCallback,
                'mouseenter.mousehold': data.mouseenterCallback,
                'mouseleave.mousehold': data.mouseleaveCallback
            });
            $(document).on('mouseup.mousehold', data.mouseupCallback);
            $this.data('mousehold', data);
        },
        teardown: function () {
            var data,
                $this;
            $this = $(this);
            data = $this.data('mousehold');
            clearTimeout(data.timeout);
            clearInterval(data.interval);
            $this.off({
                'mousedown.mousehold': data.mousedownCallback,
                'mouseenter.mousehold': data.mouseenterCallback,
                'mouseleave.mousehold': data.mouseleaveCallback
            });
           ...