javascript事件基础--鼠标事件

最新推荐文章于 2024-10-10 16:22:39 发布

wenmin1987

最新推荐文章于 2024-10-10 16:22:39 发布

阅读量852

点赞数

分类专栏： JavaScript 文章标签：鼠标移动拖放鼠标经过鼠标来源鼠标定位

本文链接：https://blog.csdn.net/wenmin1987/article/details/88763897

版权

JavaScript 专栏收录该内容

64 篇文章 1 订阅

订阅专栏

鼠标事件类型包括：click dblclick mousedown mouseout mouseover mouseup mousemove

其中鼠标点击包括：click（单击）、dblclick（双击）、mousedown（按下）、mouseup（松开）

鼠标点击：每次点击输出不同的值，并且限制每次点击时间间隔为3s

var count=0;//标记，配合数组每次输出不同的值
           var CLICKMARK = 0;//标记,可用于防止重复点击按钮的场景

btn.οnclick=function(){
           if (CLICKTAG == 0) {
var ouput=["a","b","c"];
if(count<3){
alert(ouput[count++]);
}
               CLICKMARK = 1;
btn.disabled=true;//按钮置灰
// 等待3s后重置按钮可用
setTimeout(function () { CLICKMARK = 0 ; btn.disabled=false;}, 3000);
}

           }

鼠标移动（mousemove）：（拖放）

<div id="box">元素的拖放</div>
       <script type="text/javascript">
           //初始化拖放对象
           var box=document.getElementById("box");
           box.style.position="absolute";//拖放元素为绝对定位
           box.style.width="160px";
           box.style.height="120px";
           box.style.backgroundColor="red";
           //初始化变量，标准化事件对象
           var mx,my,ox,oy;// 前两变量按下鼠标的指针xy坐标，后两变量拖动元素的xy坐标
           function e(event){
               if(!event){//兼容IE
                   event=window.event;
                   event.target=event.srcElement;
                   event.layerX=event.offsetX;//layerX为最近绝对定位元素的左上角为原点定义x轴坐标，兼容Mozilla和Safari
                   event.layerY=event.offsetY;
               }
               event.mx=event.pageX||event.clientX+document.body.scrollLeft;//pageX不兼容IE，clientX不兼容Safari，窗口左上为原点定义X坐标
               event.my=event.pageY||event.clientY+document.body.scrollTop;
               return event;
           }
           //定义鼠标事件处理函数
           document.οnmοusedοwn=function(event){//按下鼠标时，初始化处理
               event=e(event);
               o=event.target;
               ox=parseInt(o.offsetLeft); //拖放元素的x轴坐标（按下时）
               oy=parseInt(o.offsetTop); //拖放元素的y轴坐标
               mx=event.mx;
               my=event.my;
               document.οnmοusemοve=move; //注册鼠标移动事件处理函数
               document.οnmοuseup=stop; //注册松开鼠标事件处理函数
           }
           function move(event){
               event=e(event);
               o.style.left=ox+event.mx-mx+"px"; //定义拖动元素的x轴距离
               o.style.top=oy+event.my-my+"px";

           }
           function stop(event){
               event=e(event);
               ox=parseInt(o.offsetLeft); //记录拖放元素的x轴坐标（松开时）
               oy=parseInt(o.offsetTop); //记录拖放元素的x轴坐标
               mx=event.mx;
               my=event.my;
               o=document.οnmοusemοve=document.οnmοuseup=null;//释放所有操作对象
           }
       </script>

鼠标经过：移过（mouseover）和移出（mouseout）

<div>
           <div>
                   <div>盒子mouseout mouseover</div>
           </div>
       </div>
       <script>
           var div=document.getElementsByTagName("div");
           for(var i=0;i<div.length;i++){
               div[i].οnmοuseοver=function(e){//移过边框变蓝（外层div到内存div的过程）
                   this.style.border="solid blue";
               }
               div[i].οnmοuseοut=function(){//移出边框变红
                   this.style.border="solid red";
               }
           }
       </script>

鼠标来源：target 或srcElement

<div>div元素</div>
       <script>
           var div1=document.getElementsByTagName("div")[0];
           div1.οnmοuseοver=function(e){
               var e=e||window.event;
               var o=e.target||e.srcElement;
               alert(o.tagName);//返回div
           }
       </script>

       <script>

var div1=document.getElementsByTagName("div")[0];
           div1.οnmοuseοver=function(e){
               var e=e||window.event;
               var o=e.relatedTarget||e.toElement;
               alert(o.tagName);//返回HTML（或BODY）
           }
           div1.οnmοuseοut=function(e){
               var e=e||window.event;
               var o=e.relatedTarget||e.toElement;
               alert(o.tagName);//返回HTML（或BODY）
           }
       </script>

鼠标定位：

clientX clientY 以浏览器窗口左上顶角为原点定位，不兼容Safari

offsetX,offsetY 以当前事件的目标对象左上角为原点定位，不兼容Mozilla

pageX pageY 以Document对象（文档窗口）左上角为原点定位，不兼容IE

screenX screenY 以计算机屏幕左上角为原点定位，兼容所有浏览器

layerX layerY 以最近的绝对定位的父元素（如果没有，则以Document对象）左上角为原点定位，兼容Mozilla Safari

举例：pageX pageY clientX clientY 封装鼠标定位代码

1.元素跟随鼠标指针

<div id="div1">鼠标跟随</div>

<script>

var div1=document.getElementById("div1");

var pos=function(o,x,y,event){//x,y为元素偏离指针的偏移量

var posX=0,posY=0;

var e=event||window.event;

if(e.pageX||e.pageY){//获取鼠标指针的当前位置

posX=e.pageX;

posY=e.pageY;

}else if(e.clientX||e.clientY){//window等对象会出现滚动条偏移量需要加上

posX=e.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;

poxY=e.clientY+document.documentElement.scrollTop+document.body.scrollTop;

}

o.style.position="absolute";

o.style.top=(posY+y)+"px";

o.style.left=(posX+x)+"px";

}

document.οnmοusemοve=function(event){

pos(div1,10,20,event);

}

</script>

2、获取鼠标指针在元素内的坐标，即以元素自身为坐标参照物来获取鼠标指针的位置

offsetX offsetY 但须要 layerX layerY来兼容Mozilla浏览器

<input type="text" id="text">

<span style="position:absolute;">

<div id="div1" style="width:200px;height:160px;border:solid 1px red">鼠标跟随</div>

</span>

<script>

var t=document.getElementById("text");

var div1=document.getElementById("div1");

div1.οnmοusemοve=function(event){

var event=event||window.event;

if(event.offsetX||event.offsetY){

t.value="X:"+event.offsetX+"，Y: "+event.offsetY;

}else if(event.layerX||event.layerY){

t.value="X:"+(event.layerX-1)+"，Y: "+(event.layerY-1);//layerX以绝对定位的父元素为参照，需适当减去一个或几个px的偏移量

}

}

</script>

注意：在元素外层包裹了一个绝对定位元素，会破坏整个页面的结构布局，在确保人为方式不会导致页面结构混乱的前提下可考虑这种方法

鼠标按键：

通过事件对象的button属性可获取当前鼠标按下的键，可用于 click mousedown mouseup事件类型

单击 IE 标准

左键 1 0

右键 2 2

中键 4 1

同时左右 3（1+2）不支持

同时中右 6   不支持

同时左中 5   不支持

同时左中右 7   不支持

监测右键单击操作，并组织默认行为

document.οnclick=function(e){

var e =e||window.event;

if(e.button==2){

e.preventDefault();

return false;

}

}