js 長押しのイベント

サンプル

<div id="myElement">長押しさせたい要素</div>

<script>
    class LongPress {
        constructor(element, options = {}) {
            this.element = element;
            this.eventName = options.eventName || 'longpress'; // イベント名
            this.longPressTime = options.longPressTime || 500; // 長押しの条件（ミリ秒）
            this.enableClick = options.enableClick || false; // クリックによる長押しを有効にするか
            this.timer = null;
            this.deviceType = 'touch';
            if (!('ontouchstart' in window)) { // タッチイベント未サポートのとき
                this.deviceType = 'mouse';
            }
            this.initEvents();
        }

        initEvents() {
            if (this.deviceType === 'touch') {
                this.element.addEventListener('touchstart', (e) => this.startTimer(e), false);
                this.element.addEventListener('touchend', (e) => this.clearTimer(e), false);
                this.element.addEventListener('touchcancel', (e) => this.clearTimer(e), false);
            }
            else if (this.deviceType === 'mouse' && this.enableClick) {
                this.element.addEventListener('mousedown', (e) => this.startTimer(e), false);
                this.element.addEventListener('mouseup', (e) => this.clearTimer(e), false);
                this.element.addEventListener('mouseleave', (e) => this.clearTimer(e), false);
            }
        }

        startTimer(event) {
            this.timer = setTimeout(() => this.fireLongPress(event), this.longPressTime);
        }

        clearTimer(event) {
            if (this.timer) {
                clearTimeout(this.timer);
                this.timer = null;
            }
        }

        fireLongPress(event) {
            const longPressEvent = new CustomEvent(this.eventName, {
                bubbles: true,   // イベントがバブリングするか
                cancelable: true, // イベントがキャンセル可能か
                detail: { // カスタムデータ
                    message: 'Long press detected!'
                }
            });
            this.element.dispatchEvent(longPressEvent);
        }
    }

    // カスタムイベントのイベント名
    const evName = 'longpress';

    // カスタムイベントの作成
    const myElement = document.querySelector('#myElement');
    const longPressInstance = new LongPress(myElement, {
        eventName: evName,
        longPressTime: 500,
        enableClick: true, // フラグ: 「（PCの場合）クリックで長押し」を有効
    });

    // カスタムイベントの登録
    myElement.addEventListener(evName, (ev) => {
        alert(ev.detail.message);
    });
</script>