JavaScriptでクリックを検出するイベントの動作テストツール
右クリックや左クリック、またはダブルクリックを検出するJavaScriptのイベント動作テストができます。
プレビュー
<div id="click-area">ここをクリック</div>#click-area {
width: 250px;
height: 50px;
background-color: #f0f0f0;
border: 2px dashed #ccc;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
user-select: none;
transition: background-color 0.2s;
}
#click-area:active {
background-color: #e0e0e0;
}const clickArea = document.querySelector('#click-area');
let timeoutId;
// メッセージをリセットする関数（動作テスト用）
const resetText = () => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
clickArea.textContent = 'ここをクリック';
}, 1000);
};
// 左クリック検出 (click)
clickArea.addEventListener('click', (event) => {
clickArea.textContent = '左クリック';
resetText();
});
// 右クリック検出 (contextmenu)
clickArea.addEventListener('contextmenu', (event) => {
event.preventDefault(); // コンテキストメニューを無効化
clickArea.textContent = '右クリック';
resetText();
});
// ダブルクリック検出 (dblclick)
clickArea.addEventListener('dblclick', (event) => {
clickArea.textContent = 'ダブルクリック';
resetText();
});機能・使い方
click（左クリック）、contextmenu（右クリック）、dblclick（ダブルクリック）のイベントリスナーを使用して、クリックの種類を判定します。- テストエリアをクリック操作すると、判定結果がテキストで表示され、1秒後に元のテキストに戻ります。
- 右クリック時には
event.preventDefault()を使用してブラウザのメニュー表示をキャンセルしています。
preventDefault()について
preventDefault()は、イベントのデフォルトの動作をキャンセルするメソッドです。
例えば、リンクをクリックしたときにページが遷移するのをキャンセルしたり、フォームを送信するのをキャンセルしたりすることができます。
また、右クリックしたときにコンテキストメニューが表示されるのをキャンセルすることもできます。
