javascript使用mouseover和mouseout,只在css中支持hover

jquery支持mouseover和mouseout,封装了mouseenter、mouseleave事件函数和hover函数

1、有关js中的mouseover和mouseout

原生js的事件类型是mouserout和mouseover,之前提到的事件冒泡的缺陷就在这里,之前说的使用阻止冒泡就行,大概说得太轻易。来理一理它们的触发顺序吧。

<div id=”f1”>

         <div id=”c1”></div>

</div>

如上dom结构,鼠标从body移入f1,再移入c1,然后移出c1、f1回到body,如果不做阻止冒泡处理一共触发了以下有关f1和c1事件:

  <1>起源于f1的 mouseover事件

  <2>起源自f1的mouseout事件

  <3>起源自c1的mouseover事件,这个事件会冒泡,触发f1的mouseover事件

  <4>起源自c1的mouseout事件,这个事件会冒泡,触发f1的mouseout事件

  <5>起源自f1的mouseover事件

  <6>起源自f1的mouseout事件

  可以看出,一是父元素鼠标移到子元素也会触发移入移出效果,二子元素移入移出的时候也会冒泡触发父元素监听器。

  如果给f1设置了监听器,我们就会触发6次监听器。

  但是,我们一般要用的效果是鼠标从body移入f1触发监听器—在f1里面移动(不要触发监听器)--鼠标从f1移出到body触发一次监听器(即常见的hover效果,上文六个事件只想触发第一个和最后一个)。这个效果在jq里面封装在mouseenter、mouseleave事件和hover()函数中。如果想要自己写的话可以使用阻止冒泡(很麻烦,需要关注到所有元素),或者自己在监听器中善用target(触发事件的元素),currentTarget(绑定监听器的元素),toElement和fromElement来判断。

  <1>当target!=curentTarget,可以过滤子元素触发的事件

  <2>移出事件,当toElement是父元素,可以判断是真正的移出

  <3>移入事件,当fromElement是父元素,可以判断是真正的移入

2、原生js实现hover效果

这只是其中一种方法,相关的分析上面已经说清楚了,因为我用的是谷歌和火狐,只做了兼容谷歌和火狐的版本,如果你的浏览器不支持,使用console,log(e)查看事件属性自己修改,或者换个方法,或者使用jquery封装好的函数都可。

方法一:这个bug比较多,下面方法二是改版

                       //********自定义的hover事件,兼容谷歌火狐
function hoverit(e){
var e = e||window.event||event;
var target = e.target||e.srcElement;
var curr = e.currentTarget||originalTarget;
if(target!=curr) return;//过滤子元素引起的事件
var relaElementto = e.toElement||e.relatedTarget;
var relaElementfr = e.fromElement||e.relatedTarget;
if(relaElementto==target.parentNode&&e.type=="mouseout"){//移出事件
console.log(e.target.getAttribute('id'));
//定义移出引发的事件
console.log('hover out');
}
else if(relaElementfr==target.parentNode&&e.type=="mouseover"){//移入事件
console.log(e.target.getAttribute('id'));
//定义移入引发事件
console.log('hover in');
} }
//********js的mouseover和mouseout
document.getElementById('f1').onmouseover=hoverit;
document.getElementById('f1').onmouseout=hoverit;

原生js实现hover事件效果

方法二:

//******用法:将该元素同时绑定在mouseover和mouseout事件上,并在注释位置定义自己的事件
var showPicCommand = function(e){
var e = e||window.event||event;
var curr = e.currentTarget||originalTarget;//定义了hover事件的元素
var relaElementto = e.toElement||e.relatedTarget;//移出事件的目标
var relaElementfr = e.fromElement||e.relatedTarget;//移入事件的目标
if(!curr.contains(relaElementto)&&e.type=="mouseout"){//移出事件,即,当移出的目标不是它的子元素中的任一个,我们就确定它的确是移出了
//定义移出引发的事件
console.log('hover out');
}
else if(!curr.contains(relaElementfr)&&e.type=="mouseover"){//移入事件,即,当移入的目标不是它的子元素中的任一个,我们就确定它的确是移入了
//定义移入引发事件
console.log('hover in');
}
}

原生js实现hover

3、jquery事件

jquery支持mouseover和mouseout,效果和js的一样

//*********jquery也可以使用mouseover和mouseout
$('#f2').on('mouseover',showit);
$('#f2').on('mouseout',showit);

jquery自定义了mouseenter和mouseleave事件

//*********自定义的mouseenter和mouseleave
$('#f2').on('mouseenter',showit);
$('#f2').on('mouseleave',showit);

jquery封装了mouseenter()、mouseleave()函数,并将mouseenter和mouseleave事件监听器的绑定封装到hover函数中

//*********将mouseenter和mouseleave封装成hover
$('#f2').hover(showit,showit);

参考:

https://blog.csdn.net/yu9696/article/details/68942408/

https://www.cnblogs.com/starof/p/4106904.html

https://www.cnblogs.com/tidhy/p/6661882.html

Javascript和jquery事件-鼠标移入移出事件的更多相关文章

  1. jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout

    hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mou ...

  2. js(jquery)鼠标移入移出事件时,出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  3. js鼠标移入移出事件会被子元素触发解决方法

    问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.

  4. Vue 鼠标移入移出事件

    Vue 中鼠标移入移出事件 @mouseover和@mouseleave 然后绑定style   现在开始代码示例 <template> <div class="pc&qu ...

  5. Qt 为QPushButton、QLabel添加鼠标移入移出事件

    QT 为QPushButton.QLabel添加鼠标移入移出事件**要实现的效果:**鼠标移入QPushButton时与移出时按钮变换字体颜色,鼠标移入QLabel时显示上面的文字,移出时不显示.** ...

  6. JS添加、设置属性以及鼠标移入移出事件

    源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  7. JavaScript与jQuery关于鼠标点击事件

    即实现鼠标点击其中一个菜单发生样式的改变,当点击下一个菜单时,当前菜单样式改变,其他菜单均变为之前样式. 用JavaScript,jQuery都可以实现,只是后者是封装的JavaScript库,具有s ...

  8. jquery——解决鼠标移入移出导致盒子不停移动的bug

    使用mouseover().mouseout()时会出现这样一种情况,鼠标快速多次移入移出后这个盒子会在鼠标不动后继续运动 代码如下: <!DOCTYPE html> <html l ...

  9. javascript父级鼠标移入移出事件中的子集影响父级的处理方法

    一.我们先分析其产生的原因: 1.当鼠标从父级移入子集时触发了父级的两个事件:a.父级的mouseout事件(父级离开到子集):b.由于事件冒泡影响,又触发了父级的mouseover事件(父级移入父级 ...

随机推荐

  1. CCF模拟题 相反数

    相反数 时间限制: 1.0s 内存限制: 256.0MB 问题描述 有 N 个非零且各不相同的整数.请你编一个程序求出它们中有多少对相反数(a 和 -a 为一对相反数).   输入格式 第一行包含一个 ...

  2. Windows操作系统下将Redis安装为服务

    安装服务: E:/Redis/Redis-x64-3.2.100/redis-server.exe --service-install E:/Redis/Redis-x64-3.2.100/redis ...

  3. vue.js 第一课:实例化vue

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 最简单的基于FFmpeg的移动端样例:Android 视频转码器

    ===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...

  5. SQL Server 为代码减负之存储过程

        存储过程能够用来提高数据库的查询效率.由于它事先被编译过.被储存于内存中,每次执行前.不必被从新编译,所以效率非常高. 存储过程是一组sql增删改查的集合,假设程序中的一个功能涉及到对数据库的 ...

  6. LintCode-最大子数组差

    给定一个整数数组,找出两个不重叠的子数组A和B,使两个子数组和的差的绝对值|SUM(A) - SUM(B)|最大. 返回这个最大的差值. 您在真实的面试中是否遇到过这个题? Yes 例子 给出数组[1 ...

  7. Js经典实例收集

    跨浏览器添加事件 //跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(t ...

  8. 戏说Linux商用数据库

    戏说Linux商用数据库 上一篇文章(http://chenguang.blog.51cto.com/350944/277533)我介绍了Linux下几款开源数据库Mysql,MaxDB.Postgr ...

  9. 在Vue单页面应用中使用Promise链式调用

    eg: this.commonLoginFun().then((res) => { if (res.errNo === 0) { const { isLogin } = res.data; if ...

  10. 使用spring-boot 国际化配置所碰到的乱码问题

    写好html静态页面 ,  也加上了编码格式 , 获取国际化展示在浏览器中还是存在乱码 , 开始以为是浏览器编码格式问题 , 做过处理后任没有得到解决 , 具体的处理方案如下: <meta ht ...