この要件をみたとき、windowオブジェクトなどでkeydownイベントを監視しておいてフラグを立てるのかなと感じたのですが、よく調べるとmouseイベントのみで判定ができるようでした。
mouseイベントオブジェクトにはshiftKeyプロパティがありマウスイベントが発行されたときにshiftキーが押下されていたかどうかを真偽値で返してくれます。
ですので以下のような単純な分岐で判定可能です。
document.querySelector('.selector').addEventListener('click', (e) => {
if(e.shiftKey){
// シフトを押しながらのクリックされ場合の処理
}
});
mouseイベントオブジェクトには他のキーボード操作も判定可能です。
| プロパティ | キーボード |
|---|---|
| altKey | Altが押下された状態か |
| shiftKey | Shiftが押下された状態か |
| ctrlKey | Controlが押下された状態か |
| metaKey | コマンドキー (⌘)が押下された状態か |
このプロパティを知っていれば難しくないのですが、知らなければ遠回りで複雑な実装になる可能性もあるので注意が必要ですね。
Discussion