【JavaScript】要素を押した時のイベントを登録する関数( プロトタイプ拡張 )

2018年11月24日
JavaScript

イベントを登録する時の記述を楽にするため作成した。

前提

下記の関数を定義済みの想定とする。

コード

Element.prototype.registerOnPushed = function( onPushed ) {
    if ( isSmartPhoneOrTablet() ) {
        let     isTouching  = false;
        const   OPTION      = canUsePassive() ? { passive: true } : false;

        const onTouched = function() {
            if ( !isTouching ) return;

            onPushed();
            isTouching = false;
        };

        this.addEventListener( 'touchstart' , function() { isTouching = true;  }, OPTION );
        this.addEventListener( 'touchmove'  , function() { isTouching = false; }, OPTION );
        this.addEventListener( 'touchend'   , onTouched                         , OPTION );
    }
    else {
        this.addEventListener( 'click', onPushed );
    }
};

使い方

Element型のオブジェクトから、引数に「押した時のイベント」を指定し、呼び出すだけ。

const ELEMENT = document.getElementById( 'element' );

ELEMENT.registerOnPushed( function() {
	// 要素を押した時の処理
} );