jQuery鼠标事件 – click与dbclick事件

 

用交互操作中,最简单直接就是点击操作。jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于监听用户双击操作。这两个方法的用户是类似,下面以click()事件为例

使用上非常简单:

方法一:$ele.click()

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

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

方法二:$ele.click( handler(eventObject) )

绑定$ele元素,每次$ele元素触发点击操作会执行回调 handler函数,这样可以针对事件的反馈做很多操作了,方法中的this是指向了绑定事件的元素

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

方法三:$ele.click( [eventData ], handler(eventObject) )

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

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

dbclick()的用法和click()的用法是类似的,可以参考以上click()的用法。

dbclick与click事件不同的是:

click事件触发需要以下几点:

  • click事件其实是由mousedown与mouseup 2个动作构成,所以点击的动作只有在松手后才触发

PS:mousedown和mouseup下一节会讲到

dblclick事件触发需要以下几点:

dblclick又是由2个click叠加而来的,所以dblclick事件只有在满足以下条件的情况下才能被触发

  • 鼠标指针在元素里面时点击。
  • 鼠标指针在元素里面时释放。
  • 鼠标指针在元素里面时再次点击,点击间隔时间,是系统而定。
  • 鼠标指针在元素里面时再次释放。

注意:在同一元素上同时绑定 click 和 dblclick 事件是不可取的。各个浏览器事件触发的顺序是不同的,一些浏览器在dblclick之前接受两个 click 事件 ,而和其它浏览器只接受一个 click 事件。用户往往可通过不同的操作系统和浏览器配置双击灵敏度

发表评论

电子邮件地址不会被公开。 必填项已用*标注