mousedown イベントを JavaScript または jQuery でフック／無効にするサンプルプログラム

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 の書き方を忘れてきちゃいますよね、、時々思い出す機会を作った方が良さそうです。。