ホームページ > 記事 > ウェブフロントエンド > jQueryマウスイベントとは何ですか?
マウス イベントは、ユーザーがマウス カーソルを移動するか、マウス ボタンをクリックするとトリガーされます。
1. クリックイベント: マウスの左ボタンがクリックされたときにトリガーされます
$('p').click(function(){});
例:
$('p').click(function(){ alert('click function is running !'); });
2. dbclick イベント: 2 回連続してクリックされたときにトリガーされます
$('p')。 dbclick(function (){});
例:
$("button").dblclick(function(){ $("p").slideToggle(); });
3. Mousedown イベント: マウスが押されたときにトリガーされます
$('p').mousedown(function(){});
例
$("button").mousedown(function(){ $("p").slideToggle(); });
4. Mouseup イベント: マウスが離されたときにトリガーされます
$('p').mouseup(function(){});
例:
$("button").mouseup(function(){ $("p").slideToggle(); });
5. Mouseover イベント: マウスある要素から別の要素へ移動 要素のタイミングでトリガー
mouseoutイベント: マウスが要素の外へ移動したときにトリガー
$('p').mouseover(function(){}); $('p').mouseout(function(){});
例:
$("p").mouseover(function(){ $("p").css("background-color","yellow"); }); $("p").mouseout(function(){ $("p").css("background-color","#E9E9E4"); });
6、mouseenterイベント: マウスが要素内に移動したときにトリガー
mouseleaveイベント: マウスが要素の外に移動するとトリガーされます
$('p').mouseenter(function(){}); $('p').mouseleave(function(){});
Example
$("p").mouseenter(function(){ $("p").css("background-color","yellow"); }); $("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4"); });
7、hoverイベント
$('p').hover( function(){}, function(){} );
Example
$(".table_list tr").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } );
8、toggleイベント: マウスクリック切り替えイベント
$('p').toggle( function(){}, function(){} );
例
$("p").toggle( function(){ $("body").css("background-color","green");}, function(){ $("body").css("background-color","red");}, function(){ $("body").css("background-color","yellow");} );
以上がjQueryマウスイベントとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。