jQuery のイベントを利用するコードを紹介します。イベントを利用するとセレクタで選択したオブジェクトにクリックなどのイベント動作を割り当てることができます。
Click イベント
クリックイベントに関しては
こちらの記事を参照してください。
DoubleClick イベント
書式
(セレクタ).dblclick(イベント実行関数)
または
(セレクタ).dblclick(function(){
...クリック時に実行する処理
})
と記述します。
コード
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div.button").dblclick(function () {
alert("ダブルクリックされました。");
})
})
</script>
<style>
.button {
border: solid 1px #0094ff;
background-color: #e1e1e1;
width:200px;
height:32px;
}
</style>
</head>
<body>
<div class="button">アイコンのつもりです。</div>
</body>
</html>
実行結果
上記のコードをWebブラウザで表示します。下図の画面が表示されます。
"アイコンのつもりです。"の枠をダブルクリックすると、下図のダイアログボックスが表示されます。
MouseUp MouseDown イベント
書式
MouseUp
(セレクタ).mouseup(イベント実行関数)
または
(セレクタ).mouseup(function(){
...クリック時に実行する処理
})
MouseDown
(セレクタ).mousedown(イベント実行関数)
または
(セレクタ).mousedown(function(){
...クリック時に実行する処理
})
と記述します。
コード
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div.button").mousedown(function () {
$("div#message").text("マウスのボタンが押されました。");
})
$("div.button").mouseup(function () {
$("div#message").text("マウスのボタンがはなされました。");
})
})
</script>
<style>
.button {
border: solid 1px #0094ff;
background-color: #e1e1e1;
width: 200px;
height: 32px;
}
</style>
</head>
<body>
<div class="button">枠</div>
<div id="message"></div>
</body>
</html>
実行結果
上記のHTMLファイルを表示します。下図の画面が表示されます。
[枠]にマウスのポインタを載せマウスボタンを押します。マウスボタンが押された旨のメッセージが表示されます。(下図)=
マウスのボタンを離すと、マウスボタンがはなされた旨のメッセージが表示されます。
MouseOver MouseOut イベント
書式
MouseOver
(セレクタ).mouseover(イベント実行関数)
または
(セレクタ).mouseover(function(){
...クリック時に実行する処理
})
MouseOut
(セレクタ).mouseout(イベント実行関数)
または
(セレクタ).mouseout(function(){
...クリック時に実行する処理
})
と記述します。
コード
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div.button").mouseover(function () {
$("div#message").html("枠内にポインタがあります。")
})
$("div.button").mouseout(function () {
$("div#message").html("")
})
})
</script>
<style>
.button {
border: solid 1px #0094ff;
background-color: #e1e1e1;
width:200px;
height:32px;
}
</style>
</head>
<body>
<div class="button">枠です</div>
<div id="message"></div>
</body>
</html>
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[枠]の内側にマウスポインタを移動します。枠にポインタが入ると"枠内にポインタがあります。"のメッセージが表示されます。
マウスポインタが枠の外側に出るとメッセージは非表示になります。
著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
最終更新日: 2024-01-06
作成日: 2013-12-27
