これまで多くのwebシステムを構築してきた、ユゲタです。
パソコンの中で一番起動率（使用率）の高いアプリといえば、圧倒的にインターネットブラウザだと思われます。
何かを調べる時に、ググりますよね。
また、新しくアプリをインストールする時にも、ブラウザを使ってダウンロードをする事が多いでしょう。
そんなインターネットブラウザって、もはや無敵アプリと言っても過言ではないんじゃないでしょうか？
そして、便利にパソコンを使いたい人は、インターネットブラウザで扱えるwebアプリを使うことで、無駄なアプリをインストールせずに済むし、
アプリでごちゃごちゃしてしまうパソコン内環境を防止することができるので、webアプリの需要がめっぽう増えているそうです。
そんなwebアプリを開発する時に、右クリックを使った、ネイティブアプリさながらの仕様を入れる事になって、そのピンポイント仕様を備忘録としてブログに書いておきます。
左右クリックのイベントセット
通常クリックと右クリックのイベントをそれぞれ登録するには、簡単な方法として次のようなイベントセットを書いてみました。
<button id='click'>クリック</button>
<script>
// 通常クリック
window.addEventListener('click' , normal_click)
// 右クリック
window.addEventListener('contextmenu' , right_click)
// mousedown
window.addEventListener('mousedown' , mousedown)
function normal_click(e){
console.log('normal-click')
}
function right_click(e){
console.log('right-click')
}
function mousedown(e){
console.log('mousedown')
}
</script>
onclickは、左クリック
oncontextmenuは、右クリック
onmousedownは、マウスのボタンをクリック
※ちなみに、addEventListenerでは「on」は省いて設定するので、それぞれ、click,contextmenu,mousedownとなります。
この特性をちゃんと理解していると、簡単にセットできるよ思いますよ。
ユゲ式
上記サンプルプログラムでは、windowに対してイベントをセットしているんですが、これ非常に便利な設定方法なんですね。
システム内にボタンを設置してそれ毎にイベントをセットするという方法もいいのですが、
windowに対してセットしておくと、画面のどこをクリック（マウス操作）しても必ずイベントで拾ってくれます。
そして、イベント内でどの要素が押されたのかを判別することで、処理をまとめて行うことができます。
この処理を実装するもう一つのメリットとしては、1回のクリックで複数の処理を実行するのを防ぎたい場合です。
モーダルウィンドウが表示されている時に、表示されているボタンを押してもイベント発火を防ぎたいような場合に、処理が1箇所にまとまっているので、
判別をするのが容易になります。
これを個別要素毎に書くと、判別処理を個別に行わなければいけないため、汎用性が増します。
ちょっと難しく感じる人は、実際にシステムを構築したあとで、この方式でリファクタリングするのもアリですね。
最後に
このクリックイベント特性を理解すると、webアプリを構築するのがかなり柔軟にできるようになります。
もはや、ネイティブアプリなどではなく、webアプリでどんなソフトウェアでも作れる状態になると、プログラミングが楽しくなってくることは間違いないですよね。
Have a good programming !
0 件のコメント:
コメントを投稿