JQuery几个mouse事件的区别和用法

jQuery常用的Mouse事件有7种,分别是:
  • mouseup:鼠标在元素上松开时触发 mouseup 事件。与 click 不同,只要鼠标在元素上松开即触发。
  • mousedown:鼠标在元素上并按下时触发 mousedown 事件。与 click 不同,只要鼠标在元素上按下即触发。
  • mouseover:当鼠标位于元素上时触发 mouseover 事件,通常与 mouseout 配合使用。
  • mouseenter:当鼠标位于元素上时触发 mouseenter 事件,通常与 mouseleave 配合使用。
  • mousemove:鼠标在元素上移动时触发 moudemove 事件。
  • mouseout:鼠标在元素上移开时触发 mouseout 事件。
  • mouseleave:鼠标在元素上移开时触发 mouseleave 事件。

mouseup 和 mousedown 没什么好解释的,主要说一下 mouseover 和 mouseenter ; mouseout 和 mouseleave 的区别。

其实如果是一个单独的元素,也并看不出什么问题,而且我们也常用 mouseover 和 mouseout 组合。

但是今天在写一个QQ在线客服插件时出现了问题,我写了一个 0.3秒 的动画效果,鼠标划入显示,划出隐藏,鼠标在上面移动时,插件不停地显示隐藏好多次。

原来这两个组合是由区别的,一个单独的元素时效果几乎是一样的,问题就在于它们的子元素。

mouseover 和 mouseout 鼠标划入子元素,再次划入父元素时即再次触发,如果该元素包含子元素,鼠标在上面划动时即会触发多次。

我写了 7 个 div 标签,每个 div 标签内包含 3 个 p 标签,分别对应以上事件,触发时 console.log( ) 111、222 ...... 777。

HTML部分代码:

<div class="one">
    <p>mouseup</p>
    <p>mouseup</p>
    <p>mouseup</p>
</div>
<div class="two">
    <p>mousedown</p>
    <p>mousedown</p>
    <p>mousedown</p>
</div>
<div class="three">
    <p>mouseover</p>
    <p>mouseover</p>
    <p>mouseover</p>
</div>
<div class="four">
    <p>mouseenter</p>
    <p>mouseenter</p>
    <p>mouseenter</p>
</div>
<div class="five">
    <p>mousemove</p>
    <p>mousemove</p>
    <p>mousemove</p>
</div>
<div class="six">
    <p>mouseout</p>
    <p>mouseout</p>
    <p>mouseout</p>
</div>
<div class="seven">
    <p>mouseleave</p>
    <p>mouseleave</p>
    <p>mouseleave</p>
</div>

简单设置一下CSS,添加背景色:

div{
            width: 120px;
            float: left;
            margin: 10px;
            background: #5a5a5a;
        }
        p{
            height: 20px;
            width: 100px;
            margin: 10px;
            background: #3EBBB5;
            text-align: center;
            color: #FFF;
        }

js 代码如下:

$(function(){
            $('.one').mouseup(function(){
                console.log(111);
            })
            $('.two').mousedown(function(){
                console.log(222);
            })
            $('.three').mouseover(function(){
                console.log(333);
            })
            $('.four').mouseenter(function(){
                console.log(444);
            })
            $('.five').mousemove(function(){
                console.log(555);
            })
            $('.six').mouseout(function(){
                console.log(666);
            })
            $('.seven').mouseleave(function(){
                console.log(777);
            })
        })

点击事件就不演示了,3-7 分别用鼠标从下划入从上划出,在自上往下划,检查控制台打印的次数。

打印结果如下图, mouseover 和 mouseout 在包含子元素的情况下会多次触发,mouseover 即使不包含子元素也会不断触发,mouseenter 在鼠标划入时触发一次,mouseleave 在鼠标划出时触发一次。

明天把QQ聊天插件发出来,先放链接:QQ聊天插件,鼠标划入划出显示隐藏效果。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据文摘

我们和Pornhub的开发者聊了聊

无论你对色情内容采取何种立场,都无法否认成人网站行业对推动互联网发展具有巨大影响。从将浏览器的视频限制推送到通过WebSocket推送广告,以便广告拦截器无法检...

12220
来自专栏Java研发军团

Logback配置文件这么写,TPS提高10倍

受台风利奇马的影响很多地方都迎来了强降雨,双休日不能出去玩一起学习吧,就先从最基本的配置讲起再介绍高级特性异步输出日志。如果只想看异步输出日志提升性能的部分请将...

9130
来自专栏代码人生

AngularJS系列(八)——事件

8610
来自专栏芋道源码1024

深入剖析 Redis5.0 全新数据结构 Streams(消息队列的新选择)

Redis 5.0 全新的数据类型:streams,官方把它定义为:以更抽象的方式建模日志的数据结构。Redis的streams主要是一个append only...

8410
来自专栏java大数据

javascript当中绑定事件和方法

8.绑定事件和方法 once, long time to know that "script" must be put in behind, while "in...

7100
来自专栏机器学习AI算法工程

【项目.源码】深度学习视觉计算辅助良品检验,如何做布匹疵点识别?

项目基于阿里云天池平台,提供数千份精标注布样数据,以“视觉计算辅助良品检验”为主题,聚焦布匹疵点智能识别,开展大数据与人工智能技术在布匹疵点识别上的应用探索,助...

8320
来自专栏大前端

分析 JDK 源码丨Java HashMap

HashMap 是数组和链表组合组成的复杂结构,哈希值决定了键值在数组的位置,当哈希值相同时则以链表形式存储,当链表长度到达设定的阈值则会对其进行树化,这样做是...

6010
来自专栏keinYe

Python 命令行神器 Click

实际上 Python 标准库提供了一个默认的命令行工具 Argparse,但是对于 Click 来说 Argparse 使用起来非常的繁琐和麻烦,大多数人都很少...

11040
来自专栏沉默王二

羞,Java 字符串拼接竟然有这么多姿势

我当时看到这条微信的第一感觉是:小菜你也太菜了吧,这都不知道为啥啊!我估计正在读这篇文章的你也会有同样的感觉。

9130
来自专栏代码人生

jdk源码-HashMap

AbstractMap是Map接口的抽象实现类,通过抽象方法keySet()实现了get(key),remove(key),containsKey(key),c...

8720

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励