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

JavaScript でのイベント処理 “mousedown“をネイティブ JavaScript または jQuery でフックしたり無効にしたりするサンプルプログラムをご紹介いたします。

mousedown イベント

例として オブジェクト ID “hogehoge” の “mousedown” イベントを処理するコーディングを考えてみたいと思います。

ネイティブ JavaScript の場合には、こんな風に書きます…

document.getElementById("hogehoge")

jQuery の場合には、簡単にこんな風に書けます…

$('#hogehoge')

ネイティブ JavaScript の場合には、addEventListener を使ってこんな風に書きます…

document.getElementById("ContractToDate").addEventListener("mousedown", function(e){
});

※イベント e は、おまじないのような定型句ですね。

jQuery の場合には、こんな風に書けます…

$('#hogehoge').on('mousedown', function(){
});

また、こんな書き方もあります…

$('#hogehoge').mousedown(function(){
});

※経験上、前出の書き方の方が動きが良い…イメージがあります。

ネイティブ JavaScript の場合には、preventDefault() を使ってこんな風に書きます…

document.getElementById("ContractToDate").addEventListener("mousedown", function(e){
	e.preventDefault();
});

jQuery の場合には、return を使ってこんな風に書きます…

$('#hogehoge').on('mousedown', function(){
	return false;
});

普段 jQuery を使っているとネイティブ JavaScript の書き方を忘れてきちゃいますよね、、時々思い出す機会を作った方が良さそうです。。

PHP開発のお手伝いいたします！

エンジニア歴27年、PHP開発歴10年のブログ著者が、PHP関連の開発をお手伝いいたします！