Google 検索結果上位で解決できない問題の解決方法

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

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

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

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

詳しくはこちら >>

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です