javascript滑鼠拉框(框選)的實現

來源:互聯網
上載者:User

這個功能,我花了好幾天的時間才實現,主要是在拉框的時候,我可以實現,但是,我想在鬆開滑鼠的時候,進行自己的業務處理,但是,怎麼也不能響應滑鼠的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>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.