javascript鼠标拉框（框选）的实现

最新推荐文章于 2023-07-24 18:59:06 发布

evilmojo

最新推荐文章于 2023-07-24 18:59:06 发布

阅读量460

点赞数

分类专栏： web技术文章标签： javascript function div html up c

web技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这个功能，我花了好几天的时间才实现，主要是在拉框的时候，我可以实现，但是，我想在松开鼠标的时候，进行自己的业务处理，但是，怎么也不能响应鼠标的mouseup事件，也看了不少的例子，都是只有拉框，在移动事件里面可以实现功能，但是，鼠标的抬起事件不能响应。有的，可以相应事件，但是要鼠标在多点一下，后来就找了好多的资料，了解了事件的处理，才把这个问题搞定。
现在把代码重新整理了一下，希望对大家能有所帮助。

<html>
   <head>
       <meta http-equiv="content-type" content="text/html; charset=gbk">
       <title>拉框</title>
   </head>
   <body>
       <div id='lay1'
           οnmοusedοwn='down(event)'
           οnmοuseup='up(event)'
           οnmοusemοve='move(event)'
           style='top:30px;left:30px;width:400px;height:400px;visibility:visible;border:solid 1px blue;'
       >
           <div id='rect'
               style='position:absolute;background-color: #FF99FF'
           >
       </div>
   </div>
       <script language="javascript">

           // 是否需要(允许)处理鼠标的移动事件,默认识不处理
           var select = false;

           var rect = document.getElementById("rect");
           // 设置默认值,目的是隐藏图层
           rect.style.width = 0;
           rect.style.height = 0;
           rect.style.visibility = 'hidden';
           //让你要画的图层位于最上层
           rect.style.zIndex = 1000;

           // 记录鼠标按下时的坐标
           var downX = 0;
           var downY = 0;
           // 记录鼠标抬起时候的坐标
           var mouseX2=downX;
           var mouseY2=downY;

           //处理鼠标按下事件
           function down(event){
               // 鼠标按下时才允许处理鼠标的移动事件
               select = true;
               //让你要画框的那个图层显示出来
                //rect.style.visibility = 'visible';
               // 取得鼠标按下时的坐标位置
               downX = event.clientX;
               downY = event.clientY;

               //设置你要画的矩形框的起点位置
               rect.style.left = downX;
               rect.style.top = downY;
           }

           //鼠标抬起事件
           function up(event){
               //鼠标抬起,就不允许在处理鼠标移动事件
               select = false;
               //隐藏图层
               rect.style.visibility = 'hidden';
           }

           //鼠标移动事件,最主要的事件
           function move(event){

               // 取得鼠标移动时的坐标位置
               mouseX2 = event.clientX;
               mouseY2 = event.clientY;

               // 设置拉框的大小
               rect.style.width = Math.abs( mouseX2 - downX );
               rect.style.height = Math.abs( mouseY2 - downY );

               /*

               这个部分,根据你鼠标按下的位置,和你拉框时鼠标松开的位置关系,可以把区域分为四个部分,根据四个部分的不同,
               我们可以分别来画框,否则的话,就只能向一个方向画框,也就是点的右下方画框.

               */
               if(select){

                   rect.style.visibility = 'visible';

                   // A part
                   if( mouseX2 < downX && mouseY2 < downY ){
                       rect.style.left = mouseX2;
                       rect.style.top = mouseY2 ;
                   }

                   // B part
                   if( mouseX2 > downX && mouseY2 < downY){
                       rect.style.left = downX ;
                       rect.style.top = mouseY2;
                   }

                   // C part
                   if( mouseX2 < downX && mouseY2 > downY){
                       rect.style.left = mouseX2;
                       rect.style.top = downY ;
                   }

                   // D part
                   if( mouseX2 > downX && mouseY2 > downY ){
                       rect.style.left = downX ;
                       rect.style.top = downY;
                   }

               }
               /*
                   这两句代码是最重要的时候,没有这两句代码,你的拉框,就只能拉框,在鼠标松开的时候,
                   拉框停止,但是不能相应鼠标的mouseup事件.那么你想做的处理就不能进行.
                   这两句的作用是使当前的鼠标事件不在冒泡,也就是说,不向其父窗口传递,所以才可以相应鼠标抬起事件,
                   这个部分我也理解的不是特别的清楚,如果你需要的话,你可以查资料.但是这两句话确实最核心的部分,
                   为了这两句话,为了实现鼠标拉框,我搞了几天的时间.
               */
          window.event.cancelBubble = true;
          window.event.returnValue = false;

               function getDivOffsetLeft(){
                   var lay1 = document.getElementById("lay1");
                   //var rect = document.getElementById("rect");
                   return lay1.offsetLeft;
               }
               function getDivOffsetTop(){
                   var lay1 = document.getElementById("lay1");
                   //var rect = document.getElementById("rect");
                   return lay1.offsetTop;
               }

           }



       </script>

   </body>

</html>