小码哥的IT人生

首页 > JS > jQuery

jQuery 事件 - mousedown() 方法 概述

jQuery 2022-06-01 12:10:00小码哥的IT人生shichen

jQuery 事件 - mousedown() 方法

实例

当按下鼠标按钮时,隐藏或显示元素:

$("button").mousedown(function(){
  $("p").slideToggle();
});

完整实例:

<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").mousedown(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换</button>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

定义和用法

当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。

与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。

mousedown() 方法触发 mousedown 事件,或规定当发生 mousedown 事件时运行的函数。

触发 mousedown 事件

语法

$(selector).mousedown()

完整实例:

<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").mousedown(function(){
    $("div").slideToggle();
  });
  $("#mousePara").mouseover(function(){
    $("button").mousedown();
  });
});
</script>
</head>
<body>
<div>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</div>
<button>切换</button>
<p id="mousePara">如果您把鼠标移动本段落上,会激活上面这个按钮的 mousedown 事件。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

将函数绑定到 mousedown 事件

语法

$(selector).mousedown(function)
参数 描述
function 可选。规定当发生 mousedown 事件时运行的函数。

完整实例:

<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").mousedown(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换</button>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024