【Javascript】イベントの発生元がユーザーの操作か判定する方法

当記事ではイベントの発生元が実際のユーザーの操作なのか、スクリプトによる強制発火によるものなのかを判定する方法について記します。

Javascriptでイベントの発生元がユーザーの操作か判定
jQueryの場合

Javascriptでイベントの発生元がユーザーの操作か判定

イベントリスナーのコールバックに渡されるeventオブジェクトのisTrustedプロパティを参照することで、イベントが実際のユーザーの操作によって発生したかどうかを判定できます。

document.querySelector('#sample-btn').addEventListener('click', function(event){
    if(event.isTrusted){
        //実際のユーザーの操作
        console.log('ユーザーが実際にボタンをクリックしました')
    }else{
        //スクリプトによる強制発火
        console.log('スクリプトによりクリックイベントが強制発火されました')
    }
})

document.querySelector('#sample-btn').dispatchEvent(new Event('click')) //スクリプトによる強制発火

jQueryの場合

jQueryの場合は判定方法が少し変わり、以下のようになります。

$('#sample-btn').on('click', function(event){
    if(event.originalEvent?.isTrusted){
        //実際のユーザーの操作
        console.log('ユーザーが実際にボタンをクリックしました')
    }else{
        //スクリプトによる強制発火
        console.log('スクリプトによりクリックイベントが強制発火されました')
    }
})

//スクリプトによる強制発火
$('#sample-btn2').click()
$('#sample-btn2').trigger('click')
$('#sample-btn2').get(0).dispatchEvent(new Event('click'))

dispatchEventメソッドで強制発火された時にevent.originalEvent.isTrustedはfalseになります。
jQueryのclickメソッドやtriggerメソッドで強制発火された時にeventオブジェクトはoriginalEventを持たないのでオプショナルチェーン(?.)でエラーを回避します。

よって判定式はevent.originalEvent?.isTrustedになります。
これはevent.originalEvent && event.originalEvent.isTrustedと等価です。

以上、イベントの発生元がユーザーの操作か判定する方法でした。