JavaScript でのイベント処理 “mousedown“を ネイティブ JavaScript または jQuery でフックしたり無効にしたりするサンプルプログラムをご紹介いたします。
mousedown イベント
例として オブジェクト ID “hogehoge” の “mousedown” イベントを処理するコーディングを考えてみたいと思います。
オブジェクトを取得するには?
ネイティブ JavaScript
ネイティブ JavaScript の場合には、こんな風に書きます…
document.getElementById("hogehoge")
jQuery
jQuery の場合には、簡単にこんな風に書けます…
$('#hogehoge')
mousedown をフックするには?
ネイティブ JavaScript
ネイティブ JavaScript の場合には、addEventListener を使って こんな風に書きます…
document.getElementById("ContractToDate").addEventListener("mousedown", function(e){
});
※イベント e は、おまじないのような定型句ですね。
jQuery
jQuery の場合には、こんな風に書けます…
$('#hogehoge').on('mousedown', function(){
});
また、こんな書き方もあります…
$('#hogehoge').mousedown(function(){
});
※経験上、前出の書き方の方が動きが良い…イメージがあります。
mousedown を無効にするには?
ネイティブ JavaScript
ネイティブ JavaScript の場合には、preventDefault() を使って こんな風に書きます…
document.getElementById("ContractToDate").addEventListener("mousedown", function(e){
e.preventDefault();
});
jQuery
jQuery の場合には、return を使って こんな風に書きます…
$('#hogehoge').on('mousedown', function(){
return false;
});
感想
普段 jQuery を使っているとネイティブ JavaScript の書き方を忘れてきちゃいますよね、、時々思い出す機会を作った方が良さそうです。。
エンジニア歴27年、PHP開発歴10年のブログ著者が、PHP関連の開発をお手伝いいたします!