ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery: マウスダウンイベントの使用と定義

jQuery: マウスダウンイベントの使用と定義

黄舟
リリース: 2017-06-28 09:12:18
オリジナル
1607 人が閲覧しました

概要

一致する各要素のマウスダウンイベントにハンドラー関数をバインドします。

マウスが要素をクリックした後に、mousedown イベントがトリガーされます。

パラメータ

fnFunctionV1.0

一致する各要素の Mousedown イベントにバインドされたハンドラー関数。

[data],fnString,FunctionV1.4.3

data:mousedown([Data], fn) は、関数 fn が処理するデータを渡すことができます。

fn: 一致する各要素のマウスダウン イベントにバインドされたハンドラー関数。

説明:

マウスボタンが押されたときに要素を非表示または表示します:

jQuery コード:

$("button").mousedown(function(){ $("p").slideToggle(); });
ログイン後にコピー

例1

マウスボタンが押されたときに要素を非表示または表示します:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").mousedown(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换</button>
</body>
</html>
ログイン後にコピー

例2

この段落上でマウスを移動すると、ボタンのmousedownイベントがアクティブになります

<span style="font-weight: normal;"><span style="font-weight: normal;"><html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").mousedown(function(){
    $("p").slideToggle();
  });
  $("#mousePara").mouseover(function(){
    $("button").mousedown();
  });
});
</script>
</head>
<body>
<p>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</p>
<button>切换</button>
<p id="mousePara">如果您把鼠标移动本段落上,会激活上面这个按钮的 mousedown 事件。</p>
</body>
</html></span><span style="font-weight: 400;">
</span></span>
ログイン後にコピー



定義と使用法

マウスの場合 ポインタが要素上に移動し、マウスボタンが押されると、mousedown イベントが発生します。

クリック イベントとは異なり、マウスダウン イベントはキーを押すだけで発生し、キーを離す必要はありません。

mousedown() メソッドは、mousedown イベントをトリガーするか、mousedown イベントの発生時に実行する function を指定します。

構文

$(selector).mousedown(function)
ログイン後にコピー
パラメータ 説明
関数 オプション。マウスダウンイベントが発生したときに実行する関数を指定します。

以上がjQuery: マウスダウンイベントの使用と定義の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート