JQuery鼠标点击事件

最新推荐文章于 2024-05-30 11:55:45 发布
最新推荐文章于 2024-05-30 11:55:45 发布
阅读量8.5k 收藏 14
点赞数 4
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44546855/article/details/89351450
版权

HZY

JQuery点击事件有以下几种：
Click鼠标单击事件
Dblclick 鼠标双击事件
Mousedown鼠标按下事件
Mouseup鼠标弹起事件
Mouseenter鼠标进入事件
Mouseleave鼠标移出事件

下面是这些事件的示例代码

<style>
     button{
         margin-bottom:25px;
     }
    </style>
</head>
<body>
    <div class="container"> 
       <button class="btn-danger">JQuery鼠标单击事件</button><br />
        <button class="btn-primary">JQuery鼠标双击事件</button><br />
        <button class="btn-default">JQuery鼠标按下事件</button><br />
        <button class="btn-info">JQuery鼠标弹起事件</button><br />
        <button class="btn-success">JQuery鼠标移入事件</button><br />
        <button class="btn-warning">JQuery鼠标移出事件</button><br />
    </div>
    <script src="~/Content/bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
    <script>
        $("button:eq(0)").click(function () {
            alert("click鼠标单击事件");
        })

        $("button:eq(1)").dblclick(function () {
            alert("dblclick鼠标双击击事件");
        })
        $("button:eq(2)").mousedown(function () {
            alert("mousedown鼠标按下事件");
        })
        $("button:eq(3)").mouseup(function () {
            alert("mouseup鼠标弹起事件");
        })
        $("button:eq(4)").mouseenter(function () {
            alert("mouseenter鼠标移入事件");
        })
        $("button:eq(5)").mouseleave(function () {
            alert("mouseleave鼠标移出事件");
        })
    </script>
</body>

下面是效果图
在这里插入图片描述

在这里插入图片描述

@HZY
关注
  • 4
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jqueryt实现鼠标点击事件
m0_50913689的博客
10-18 614
常用事件 click() 鼠标单击 blur() 元素失去焦点 focus() 元素获得焦点 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发） ready() DOM加载完成 jquery添加事件： this指的是当前发生事件的对象，但是它是一个原生js对象 $(this) 指的是当前发生事件的jquery对象 ...
jQuery鼠标绑定事件案例
myx20220713的博客
08-30 559
jQuery鼠标绑定事件案例
JQuery 鼠标事件使用汇总
天马3798
12-11 5901
一、js鼠标事件 1.单机 ：左键单机、右键单机 2.双击 3.鼠标按下、鼠标松开 4.鼠标移动 5.鼠标进入、鼠标移出 6.鼠标滚轮滚动 二、JQuery鼠标事件整理 1.单机 ：左键单机、右键单机 .Click()：左键单机 为 JavaScript 的"click" 事件绑定一个处理器，或者触发元素上的 "click" 事件。(支持触屏的tab事件) .contextmenu():右键单机 右键菜单按钮时间，可以拒绝右键菜单。 2.双击 .dblclick():双击触发
jq之鼠标事件
nknnl7的博客
01-31 2014
(6):mouseout事件：mouseout事件于用户把鼠标移出一个元素时触发，这包括从父元素移动到子元素上，或者使用键盘跳到元素上。(4):mouseup事件：mouseup事件在用户松开鼠标时触发，如果在与按下鼠标的元素相同元素上松开，那么click事件也会触发。(3):mousedown事件：mousedown事件在用户敲击鼠标键时触发，跟keydown事件不一样，该事件仅在按下鼠标时触发。(1):click事件：click事件于用户在元素敲击鼠标左键，并在相同元素上松开左键时触发。
js事件基础知识
qq_68971977的博客
05-30 457
事件被触发的对象 谁被触发：如何触发，什么事件例如鼠标点击，鼠标经过，键盘按下等通过函数赋值的方式完成onclick 当点击鼠标时运行的事件onmousedown 当按下鼠标按钮时运行的事件onmouseup 当松开鼠标按钮时运行的事件onmousemove 当鼠标指针移动的时候运行的事件onmouseover 当鼠标指针移动到元素之上时运行的事件（不可以阻止冒泡）onmouseout 当鼠标指针移出元素时运行的事件（不可以阻止冒泡）
jQuery 鼠标事件 使用方法
乐逍遥
05-25 713
1.mousedown()方法 意为鼠标按下功能，通常和mouseup()方法一起使用 2.mouseenter()方法 意为鼠标经过该元素，会发生该事件 3.mouseleave() 方法 意为鼠标离开该元素时会触发的事件 4.mousemove() 方法 意为鼠标在该元素移动时，会触发事件，与mouseenter()方法不太相同 5.mouseout()方法 意为鼠标离开被选元素触发事件 6.mouseover() 方法 意为鼠标在该元素上方，会触发事件 7.mouseup()方...
jQuery鼠标点击事件
热门推荐
柯晓楠
01-16 2万+
概念 个人理解： jQuery鼠标点击事件是最常用的事件之一，当用户使用鼠标在浏览器窗口或元素上进行点击交互时触发的事件，都属于鼠标点击事件的范围。常见的鼠标操作有：单击、双击、右键等等。 click() 事件函数 说明： 当用户单击鼠标左键时触发click()函数，每触发一次匹配元素的click事件，该事件函数就会被调用。 语法： 触发被选元素的click事件： $(selector...
jQuery
qq_50748038的博客
08-26 6296
jQuery事件的基本使用绑定和解绑，事件委托和jQuery中插入内容、克隆节点的方法，了解jQuery静态方法在数组和对象上的操作以及字符串操作
jQuery鼠标事件总结
11-23
下面就来系统的介绍一下jQuery鼠标事件。 (1):click事件：click事件于用户在元素敲击鼠标左键，并在相同元素上松开左键时触发。 $('p').click(function(){ alert('click function is running !'); } ); ...
jQuery鼠标事件汇总
10-23
鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,下面我们就来看下这些事件的语法和用法
jQuery实现单击和鼠标感应事件
10-24
主要介绍了jQuery实现单击和鼠标感应事件的方法的相关资料,需要的朋友可以参考下
jQuery的事件
程序员柒的博客
09-19 1044
本文章简单讲解了jQuery事件，如果本文对你有所帮助请三连支持博主，先赞后看养成习惯。提示：以下是本篇文章正文内容，下面案例可供参考。
03-jQuery-事件绑定【click() 、on()】、事件切换toggle()、事件方法、样式控制
记录java学习日常~
05-20 7643
on() 方法是 jQuery 中最常用且最通用的事件绑定方法，可以绑定多个事件类型，并为每个事件类型指定一个或多个处理程序。click() 方法是一种简洁的事件绑定方法，只能绑定 click 事件，并且只允许绑定一个处理程序，无法为同一个元素绑定多个处理程序。off() 方法用于移除之前绑定的事件处理程序，它需要传递一个或多个事件类型参数，并为这些事件类型制定要移除的处理程序。jQuery 事件绑定中，on() 方法用于为元素添加事件处理程序，off() 方法则用于移除绑定的事件处理程序。
关于JQuery中的鼠标事件
Hfeidz的博客
10-26 3635
注：以下所有效果都会以此结构展示 <style> #box{ width: 300px; height: 300px; background-color: pink; margin: 200px auto; transition: 0.5s; text-align: center; line-height:
jQuery键盘与鼠标事件
weixin_45044349的博客
11-21 944
键盘事件 1、keydown()：在键盘按下时触发。 2、keyup()：是按下键盘起来后的事件。 3、keypress()：在敲击按键时触发，我们可以理解为按下并抬起同一个按键。 //键码获取 $(document).keydown(function (event) { alert(event.keyCode); }); 鼠标事件 1、click()：单击事件 2、dbclick()：双击事件 3、mousedown()：鼠标按下事件 4、mouseup()：鼠标弹起事件 5、mouseente
关于jQuery_鼠标事件的方法和使用
qq_55961861的博客
08-19 179
关于jQuery_鼠标事件的方法和使用!
jQuery的鼠标点击事件
DearLu1995的博客
05-14 315
1.鼠标点击事件：click(单击)dbclick(双击) 方法一：$ele.click() 绑定ele元素，用来绑定移个事件，一般用的比较少 $("#test").click(function(){ alect(这个事件被触发了); })  方法二：$ele.click(handler(eventobject)) 出发点击操作，会回调handler函数，thi...
jQuery实现鼠标点击事件
Timber_wood的博客
04-30 1455
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="/static/js/jquery-3.5.0.min.js"></script> <script type="text/javascri...
jQuery鼠标移动事件
weixin_58784569的博客
06-28 3773
概念 个人理解： jQuery鼠标移动事件是最常用的鼠标事件之一，当用户使用鼠标在指定的元素上移动时即与该元素产生交互，就会触发鼠标移动事件，比如：鼠标在指定元素上移入、移出、悬停等等操作，都属于鼠标移动事件的范围。 mouseenter()&mouseleave() 事件函数 说明： 当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。mouseenter() 方法触发 mouseenter 事件，或添加当发生 mouseenter 事件时运行的函数。 当鼠标指针
jquery鼠标事件
最新发布
06-08
jQuery是一个流行的JavaScript库，它简化了DOM操作和事件处理。在jQuery中，鼠标事件是用于响应用户的鼠标动作，如点击（click）、鼠标悬停（mouseover）或移动（mousemove）等。以下是一些主要的jQuery鼠标事件： 1. **click**: 当用户点击元素时触发。`$(selector).click(function() { ... })`。 2. **dblclick**: 双击事件，两次快速点击。`$(selector).dblclick(function() { ... })`。 3. **mouseover**: 鼠标指针进入元素时触发。`$(selector).mouseover(function() { ... })`。 4. **mouseout**: 鼠标指针离开元素时触发。`$(selector).mouseout(function() { ... })`。 5. **mousedown**: 按下鼠标按钮。`$(selector).mousedown(function() { ... })`。 6. **mouseup**: 松开鼠标按钮。`$(selector).mouseup(function() { ... })`。 7. **mousemove**: 鼠标在元素内部移动时触发。`$(selector).mousemove(function(event) { ... })`。 这些事件通常与回调函数一起使用，当事件发生时，执行预先定义好的函数来响应用户的行为。jQuery的事件处理方式简单且易于理解，提高了代码的可维护性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值