javascript滑鼠拉框（框選）的實現

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More