鼠标移入移除事件的一点小思考
最近项目中有个小需求,需要对一个div做上传图片的效果,当鼠标移入div时提示图片显示,当鼠标移除div时提示图片隐藏,我的实现方案如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <form> <div class = "file-list" > <div class = "list-img" > <div class = "cover" ></div> <img src= "img/plus.png" /> <input type= "file" class = "file" id= "file1" > <p>上传标题图片</p> </div> </div> </form> //鼠标进入事件 var enterFun= function (){ $( this ).find( '.cover' ).css( 'display' , 'block' ); $( this ).find( 'img' ).css( 'display' , 'block' ); $( this ).find( 'p' ).css( 'display' , 'block' ); $( this ).find( 'input' ).css( 'display' , 'block' ); } //鼠标移除事件 var outFun= function (){ $( this ).find( '.cover' ).css( 'display' , 'none' ); $( this ).find( 'img' ).css( 'display' , 'none' ); $( this ).find( 'p' ).css( 'display' , 'none' ); $( this ).find( 'input' ).css( 'display' , 'none' ); } //鼠标移入事件 $( ".file-list" ).find( ".list-img" ).each( function (i,el){ $(el).on( "mouseenter" ,enterFun); }) //鼠标移出事件 $( ".file-list" ).find( ".list-img" ).each( function (i,el){ $(el).on( "mouseleave" ,outFun); }) |
html中的<form>标签和<input type="file"/>是为了后面的上传图片,<div class="cover">标签是用来做背景蒙版的,<img src="img/plus.png" />是添加图片的标记图片。代码这样写,毫无疑问是可以完成任务的,但关键是重写了很多相同的代码,我希望能做一下简单的提炼,减少代码的重复,目前把js代码修改如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var mouseFun= function (event){ var display= "none" ; if (event.data.type== "enter" ) { display= "block" ; } $( this ).find( '.cover' ).css( 'display' , display); $( this ).find( 'img' ).css( 'display' , display); $( this ).find( 'p' ).css( 'display' , display); $( this ).find( 'input' ).css( 'display' , display); } //绑定事件 $( ".file-list" ).find( ".list-img" ).each( function (i,el){ $(el).on( "mouseenter" ,{type: "enter" },mouseFun);<br> $(el).on( "mouseleave" ,{type: "leave" },mouseFun); }) |
在此过程中有几个知识点希望记录一下:
1.mouseover和mouseenter事件的区别:
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。对应mouseout
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。对应mouseleave
2.jquery中on函数绑定带参函数,参数作为对象绑定在event.data上,想获取参数,必须通过event.data来获取。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步