鼠标移入移除事件的一点小思考

  最近项目中有个小需求,需要对一个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来获取。

 

posted @   陆漫漫  阅读(1505)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示