章节
问答
课签
笔记
评论
占位
占位

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事件触发需要以下几点:

  • mousedown强调是按下触发
  • 如果在一个元素按住了鼠标不放,并且拖动鼠标离开这个元素,并释放鼠标键,这仍然是算作mousedown事件
  • 任何鼠标按钮被按下时都能触发mousedown事件
  • 用event 对象的which区别按键,敲击鼠标左键which的值是1,敲击鼠标中键which的值是2,敲击鼠标右键which的值是3

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

  • mouseup强调是松手触发,与mousedown是相反的
  • mouseup与mousedown组合起来就是click事件
  • 如果用户在一个元素上按下鼠标按键,并且拖动鼠标离开这个元素,然后释放鼠标键,这仍然是算作mouseup事件
  • 任何鼠标按钮松手时都能触发mouseup事件
  • 用event 对象的which区别按键,敲击鼠标左键which的值是1,敲击鼠标中键which的值是2,敲击鼠标右键which的值是3

另外需要注意的是:

clickmousedown的区别:

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

任务

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

给页面第一个button元素绑定一个点击mousedown事件
?不会了怎么办

    $("button:eq(0)").mousedown(function(e) {
        alert('e.which: ' + e.which)
    })

||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最赞回答 / qq_慕函数833626
data(e)里的data是函数名,e是参数,e.data中的e还是那个参数,data是e的一个属性。可以理解成function fn(e){    alert(e.data);}

最新回答 / weixin_慕侠9367804
点击第二个按钮,执行函数function() {        $('p').mousedown() //指定触发绑定的事件    }在这函数里,调用了 $('p').mousedown() 函数,然后执行函数$('p').mousedown(function(e) {            alert(e.target.textContent)        })

最新回答 / qq_鸿鹄_5
可以写成立即执行函数

最新回答 / Ankkaya
不同作用域下数据传递,我的理解是方便回调函数数值传递比如下面 函数 a()只需要负责赋值,具体逻辑操作交给函数 fn()function fn(e) {$(this).val(e.data)}function a() {$("input:last").focusout('慕课网', fn)}

最新回答 / 石榴笑了
<...图片...>调试没问题?

已采纳回答 / 水秋玄
因为绑定P元素的事件是在第一个P元素之后,按顺序执行,它找不到后面的P,所以执行这段点击事件只会找到前面的那个P,不会找到后面的P。想要后面的P元素也绑定点击事件就必须把绑定事件的代码放到最后面(就可以绑定所有的P元素),或者变着这样:<...code...>文档加载完后再执行代码,就可以都绑定了。

最新回答 / qq_瀿曐洛縸迴哞庼城笶_0
是,但如果你有事件加载的话,也可以捕捉后面的

最新回答 / 用户1098335
不就是第一个按钮按下响应的事件吧

已采纳回答 / 77MICKY
mouseup强调是松手触发,也就是你松手的时候在那个元素上才能触发元素上绑定的事件。松手那会儿你离开了,当然没法触发。

最赞回答 / 笑阳不爱钱才
 html标签里 可以放任何文本内容。 老师就是把一个jq语句 放在p标签里,当作文本处理而已。计算机也是按文本输出的。

已采纳回答 / 纳尼小僧
which是event事件的一个标志属性,一般用来区分鼠标左键右键,target是事件产生的对象,上文中target指p元素节点对象。

已采纳回答 / qq_蒙蒙细雨_0
原代码: (就是要实现点击按钮,显示p的内容) <button>指定触发事件</button>    <script type="text/javascript">    $('p').mousedown(function(e) {   //此时就是当你点击p 的时候,就会弹出p的内容(步骤1)            alert(e.target.textContent)        })/*       $("button:eq(1)").mousedown(fun...

已采纳回答 / 朝闻道夕
a();-->调用 function a()就是去执行前面定义的a 函数
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言