2-2 jQuery鼠标事件之mousedown与mouseup事件
本节编程练习不计算学习进度，请电脑登录imooc.com操作

jQuery鼠标事件之mousedown与mouseup事件

用户交互操作中，最简单直接的操作就是点击操作，因此jQuery提供了一个mousedown的快捷方法可以监听用户鼠标按下的操作，与其对应的还有一个方法mouseup快捷方法可以监听用户鼠标弹起的操作。两种方法用法类似，下面以mousedown()为例

使用上非常简单：

方法一：$ele.mousedown()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，可能一般用的比较少

<div id="test">点击触发<div>
$("ele").mousedown(function(){
    alert('触发指定事件')
})
$("#test").mousedown(function(){
     $("ele").mousedown()  //手动指定触发事件 
});

方法二：$ele.mousedown( handler(eventObject) )

绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数

这样可以针对事件的反馈做很多操作了

<div id="test">点击触发<div>
$("#test").mousedown(function() {
    //this指向 div元素
});

方法三：$ele.mousedown( [eventData ], handler(eventObject) )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

<div id="test">点击触发<div>
$("#test").mousedown(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 传递数据
});

mousedown事件触发需要以下几点：

mouseup事件触发需要以下几点：

另外需要注意的是：

click与mousedown的区别：

任务

在右边代码32行处，填入任务代码

给页面第一个button元素绑定一个点击mousedown事件
index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <style>
  8.     .test2 {
  9.         background: #bbffaa;
  10.     }
  11.  
  12.     .test3 {
  13.         background: yellow;
  14.     }
  15.  
  16.     .test2,
  17.     .test3 {
  18.         border: 1px solid red;
  19.     }
  20.     </style>
  21.     </style>
  22.     <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  23. </head>
  24.  
  25. <body>
  26.     <h2>.mousedown()方法</h2>
  27.  
  28.     <h4>测试一</h4>
  29.     <button>弹出回调中的鼠标键</button>
  30.     <script type="text/javascript">
  31.     //this指向button元素
  32.     $("button:eq(0)").？(function(e) {
  33.         alert('e.which: ' + e.which)
  34.     })
  35.     </script>
  36.  
  37.  
  38.     <h4>测试二</h4>
  39.     <div class="test2">
  40.         <p>$('button:first').mousedown(function(e) {alert(this)})</p>
  41.     </div>
  42.     <button>指定触发事件</button>
  43.     <script type="text/javascript">
  44.     $('p').mousedown(function(e) {
  45.             alert(e.target.textContent)
  46.         })
  47.         //this指向button元素
  48.     $("button:eq(1)").mousedown(function() {
  49.         $('p').mousedown() //指定触发绑定的事件
  50.     })
  51.     </script>
  52.  
  53.  
  54.     <h4>测试三</h4>
  55.     <div class="test3">
  56.         <p>$('.right').mousedown(1111, set)</p>
  57.     </div>
  58.     <button>不同函数传递数据</button>
  59.     <script type="text/javascript">
  60.     //不同函数传递数据
  61.     function data(e) {
  62.         alert(e.data) //1111
  63.     }
  64.  
  65.     function a() {
  66.         $("button:eq(2)").mousedown(1111, data)
  67.     }
  68.     a();
  69.     </script>
  70.  
  71.  
  72. </body>
  73.  
  74. </html>
  75.  
下一节