1.事件触发的先后顺序是mousedown,mouseup,click,mousedown,mouseup,dblclick,
2.obj.onclick=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>
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>
当然，也可以不在mousemove里面获取移动的位置，直接在mouseup里面获取最后的位置更简单，