zhyiwww
用平实的笔,记录编程路上的点点滴滴………
posts - 536,comments - 394,trackbacks - 0
/*********************************************************
 * @author             zhangyi
 * @email              zhyiwww@163.com
 * @date               2007-4-2
 *
 * 转载请注明出处 http://www.blogjava.net/zhyiwww
 * @copyright          zhangyi
 *********************************************************/


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

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=gbk">
        <title>拉框</title>
    </head>
    <body>
        <div id='lay1'
            onmousedown='down(event)'
            onmouseup='up(event)'
            onmousemove='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>



|----------------------------------------------------------------------------------------|
                           版权声明  版权所有 @zhyiwww
            引用请注明来源 http://www.blogjava.net/zhyiwww   
|----------------------------------------------------------------------------------------|
posted on 2007-04-03 16:04 zhyiwww 阅读(6448) 评论(7)  编辑  收藏 所属分类: javascript

FeedBack:
# re: javascript鼠标拉框(框选)的实现
2007-04-03 16:18 | 山风小子
博主,您好!
您的程序我试过了,的确很棒!
但稍微有些不足之处,留待改进,当鼠标单击,双击时,那个粉红色的框框会突然出现。
希望您做的更好:)  回复  更多评论
  
# re: javascript鼠标拉框(框选)的实现
2007-04-03 18:17 | zhyiwww
@山风小子
因为在鼠标按下的时候就把层显示出来了。所以会有闪烁感。
你看上面上面的绿色的部分,就知道有什么不同了。
现在把 rect.style.visibility = 'visible';放在了鼠标move事件里面,也就是只要在鼠标移动事件处理的时候才会去把这一个层显示出来。就不会有问题了。
你可以试一下。  回复  更多评论
  
# re: javascript鼠标拉框(框选)的实现
2007-04-03 19:48 | cresposhi
路过,帮忙测试了一下,有点点小bug。当拉框鼠标超过容器(也就是相应鼠标事件的区域)后,再回到容器这个时候还是正常,但在容器里单击被拉的框位置就会跑到鼠标的右下方,显然就错位了,呵呵。

既然同样是JSer,再多说两句,给哥们一个建议吧,这些对事件和页面坐标操作比较多的程序最好借助于prototype框架来写,如果你用prototype就不会发生你所说的花了几天时间,查了N多资料才搞定那两行蓝色的代码的事情了,因为prototype里面已经给做了,并且很完美,且兼容浏览器,如果你说想知道原理,需要从底层来编写,其实可以选择读prototype源码来的更快更好。并且代码也不会长到以致于我真的很难有耐性读完,不过我还是坚持了,支持每一个JSer,呵呵。

呵呵 我话太多,不好意思占用楼主这么多地方,也不知道我形容清楚了没,如果有什么疑问可以来我博客交流,闪先!  回复  更多评论
  
# re: javascript鼠标拉框(框选)的实现
2007-04-03 21:46 | zhyiwww
谢谢您的建议。我觉得你的这个信息可能会对我有更大的帮助。
其实是因为我不知道,不是我不想用。我对javascript不是很熟悉,所以才会为了这个问题花了不少的时间,不过现在能自己通过找资料去独立的解决这个问题也觉得挺有成就感的。随着对JS的深入,可能就能够接受更多的信息,可以使用更多的扩展。那么在实现功能上就可以更加灵活。  回复  更多评论
  
# re: javascript鼠标拉框(框选)的实现
2009-11-19 09:48 | reader
请问个问题啊!能不能让那个画出来的粉框在画选完之后还能在页面中显示啊?
  回复  更多评论
  
# re: javascript鼠标拉框(框选)的实现[未登录]
2012-02-16 00:40 | kk
试一下给document绑定mouseup事件,呵呵。  回复  更多评论
  
# re: javascript鼠标拉框(框选)的实现[未登录]
2013-04-24 10:16 |
能帮忙优化下吗?既然是框选,方框最好是半透明吧(不挡住后面的内容)。能综合上http://www.yuzi.me/Share/Opacity-Transp.html  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: