jQuery事件之鼠标事件

标签: jquery 鼠标 移动 java
1088人阅读 评论(38) 收藏 举报
鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。
   (1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发。
        $('p').click(function(){
                alert('click function is running !');
              });
    (2):dbclick事件:dbclick事件在用户完成迅速连续的两次点击之后触发,双击的速度取决于操作系统的设置。一般双击事件在页面中不经常使用。
        $('p').dbclick(function(){
                alert('dbclick function is running !');
              });
    (3):mousedown事件:mousedown事件在用户敲击鼠标键时触发,跟keydown事件不一样,该事件仅在按下鼠标时触发。
        $('p').mousedown(function(){
                alert('mousedown function is running !');
              });
    (4):mouseup事件:mouseup事件在用户松开鼠标时触发,如果在与按下鼠标的元素相同元素上松开,那么click事件也会触发。
        $('p').mouseup(function(){
                alert('mouseup function is running !');
              }).click(function(){
                 alert('click function is running too !');
                 });
    (5):mouseover事件:mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发,如果需要知道来自那个元素可以使用,relatedTagrget属性。
    (6):mouseout事件:mouseout事件于用户把鼠标移出一个元素时触发,这包括从父元素移动到子元素上,或者使用键盘跳到元素上。
   (5)和(6)这两个事件一般不常用,很难实现与用户的交互,也就是说不易捕获用户事件。
    (7):mouseenter事件:mouseenter事件是在用户光标进入元素上时触发。
         $('p').mouseenter(function(){
                alert('mouseenter function is running !');
              });
    (8):mouseleaver事件:mouseleaver事件是在用户的光标离开元素时触发。
           $('p').mouseleaver(function(){
                alert('mouseleaver function is running !');
             });
     (7)和(8)这两个事件一般连起来使用,在jQuery中可以使用hover这个函数来代替这两个函数。
       $('p').hover(function(){
                       alert('mouseenter function is running !');
                      },function(){
                              alert('mouseleaver function is running !');
                         });
查看评论

JQuery的事件之鼠标事件

最近在慕课网学习JQuery,然后在W3C参考相关资料(在这里感谢慕课网,感谢W3C)!样式和DOM都学完了,最近在学习事件,但是说实话很多东西真的不是很理解,手里倒是有源码,但是作为菜鸟问题就在这里...
  • AZHELL
  • AZHELL
  • 2017-05-05 19:12:40
  • 1085

jQuery事件-鼠标事件

为了避免你同一份 css 在不同浏览器下表现不同,最好加上: *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-siz...
  • QQ80583600
  • QQ80583600
  • 2016-12-30 20:46:52
  • 1465

jQuery——事件篇( 鼠标、表单、键盘、事件绑定和解绑、事件对象、自定义事件)

jQuery 事件篇
  • anfangw
  • anfangw
  • 2016-12-10 10:52:05
  • 2329

JS 添加鼠标事件

无标题文档 body { background-color:#bbb;} canvas { background-color:#fff} window.onload = functi...
  • igiaour
  • igiaour
  • 2014-02-17 16:42:48
  • 1488

jquery事件机制扩展插件 jquery鼠标右键事件

jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等。但是却少了一个做事件。就是鼠标右击事件。当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数。造成鼠标...
  • wyn1433954905
  • wyn1433954905
  • 2017-04-26 10:37:04
  • 115

使用js中常用的鼠标事件实现一个拖拽的例子

一、js中常用的几个必备鼠标事件 onclick: 元素上发生鼠标点击时触发. ondblclick: 元素上发生鼠标双击时触发. onmousedown: 当元素上按下鼠标按钮时触发. onmous...
  • kellywong
  • kellywong
  • 2017-06-20 17:25:24
  • 5155

鼠标事件mousemove、mouseover、mouseout、mouseenter、mouseleave

Mousemove: 当鼠标指针在元素内移动时,mousemove事件就会被触发,任何HTML元素都可以接受此事件。 Mousemove 事件是当鼠标指针移动时触发的,即使是一个像素。这意味着多个...
  • qyaroon
  • qyaroon
  • 2016-04-19 10:50:40
  • 7183

jquery 动态绑定bind()及模拟鼠标点击A链接

近来自觉前端有小小进步,幸而记之。1、两个 css class 紧挨在一起 则在html元素中,要同时拥有这两个class,才能起作用.block.db{ background-image:...
  • leftfist
  • leftfist
  • 2016-06-03 12:03:56
  • 4161

JS鼠标事件、HTML页面事件大全,比较全,推荐收藏

JS鼠标事件大全 推荐收藏,整理的比较细,推荐大家看下。 一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4  Browse...
  • smartsmile2012
  • smartsmile2012
  • 2016-12-30 10:44:20
  • 1193

Jquery中的事件处理(自动触发事件,禁用按钮,悬停,失焦,滑动效果)

1.自动触发事件 .Red { color:Red; } .Green { color:Green; ...
  • ws_hgo
  • ws_hgo
  • 2011-07-26 17:50:59
  • 16343
    个人资料
    持之以恒
    等级:
    访问量: 29万+
    积分: 6508
    排名: 4631
    文章分类
    最新评论