click与mouse事件

最新推荐文章于 2021-12-06 09:47:41 发布

weixin_30632899

最新推荐文章于 2021-12-06 09:47:41 发布

阅读量564

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cyany/p/7763980.html

版权

1.事件触发的先后顺序是mousedown,mouseup,click,mousedown,mouseup,dblclick,

2.obj.οnclick=function(e){e.type} 找出事件类型

下面用一个简单小案例解释

点击div里面的两段文字分别执行不同事件，同时在div进行鼠标事件滑动

<style>
        div{
            width: 100%;
            height: 500px;
            background-color: #53ff55;
        }
        span{
            float: left;
        }
        p{
            float: right;
        }
    </style>
    <script src="jquery/jquery-3.1.0.js"></script>
</head>
<body>
    <div>
        <span>Lorem ipsum dolor sit amet.</span>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>

View Code

 1 <script>
 2         // $("div").click(function(e){
 3         //     console.log(e.type)
 4         //     $(this).css("background-color","#ccc");
 5         // })
 6         // $("div").mousedown(function(e){
 7         //     console.log(e.type)
 8         //     $(this).css("background-color","#ccc");
 9         // });
10         // $("div").mouseup(function(e){
11         //     console.log(e.type)
12         //     $(this).css("background-color","#ccc");
13         // });
14         // $("div").dblclick(function(e){
15         //     console.log(e.type)
16         //     $(this).css("background-color","#ccc");
17         // });
18         // 执行顺序是mousedown mouseup click mousedown mouseup dblclick
19         $("span,p").click(function(e){
20                 $(this).css("background-color","red");
21         });
22 
23         function slider(){
24             var start_dis=0;
25             var end_dis = 0;
26             $("div").on("mousedown",function(e){
27                 // console.log(start_dis)
28                 start_dis = e.pageX;
29                 // end_dis =0;
30                 // 因为鼠标移动的时候一直触发事件，所以在点击的时候将他置0，
31             })
32             $("div").on("mousemove",function(e){
33                 // console.log(end_dis)
34                 end_dis = e.pageX - start_dis;
35             })
36             $("div").on("mouseup",function(e){
37                 // console.log(e)
38                 if(end_dis>30){
39                     $(this).css("width","500px")
40                 }else if(end_dis<-30){
41                     $(this).css("width","200px")
42                 }
43             })
44         }
45         slider();
46 
47 
48     </script>

View Code

当然，也可以不在mousemove里面获取移动的位置，直接在mouseup里面获取最后的位置更简单，

转载于:https://www.cnblogs.com/cyany/p/7763980.html

weixin_30632899

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
click与mouse事件

1.事件触发的先后顺序是mousedown,mouseup,click,mousedown,mouseup,dblclick,2.obj.onclick=function(e){e.type} 找出事件类型下面用一个简单小案例解释点击div里面的两段文字分别执行不同事件，同时在div进行鼠标事件滑动<style> div{ ...
复制链接

扫一扫