JS進階第四天

js實現鼠標拖拽

首先子元素必須使用絕對定位這個步驟非常重要
獲取元素的id值設置鼠標按下事件（執行事件的元素）鼠標移動事件（document）鼠標鬆開時間(執行事件的元素) 窗口改變事件（document）
獲取文檔最大移動寬度和文檔可移動最大移動高度判斷邊界限制在整個屏幕內運動
offsetLeft:獲取自身左外邊框到定位父級的左內邊框的距離

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #box {
            height: 200px;
            width: 200px;
            background-color: red;
            position: absolute;
            cursor: move;
            top: 0;
            left: 0;
            /*這個步驟非常重要  */
        }
    </style>
</head>


<body>
    <div id="box"></div>
</body>
<script>
    //獲取元素的id值
    var box = document.getElementById("box");
    //設置鼠標按下事件

    var maxX = document.documentElement.clientWidth - box.clientWidth;
    console.log(maxX)
    var maxY = document.documentElement.clientHeight - box.clientHeight;
    console.log(maxY)
    box.onmousedown = function(e) {
        var ev = e || event; //獲取好的事件對象；
        console.log(ev) //打印事件對象的封裝的功能；
        var starX = ev.clientX;
        var starY = ev.clientY;
        console.log(starX);
        console.log(starY);
        //獲得初始的座標軸  並進行打印查看

        //設置鼠標在整個文檔的移動事件
        document.onmousemove = function(e) {
            var ev = e || event;
            var moveX = ev.clientX - starX;
            var moveY = ev.clientY - starY;
            //鼠標移動後的座標軸

            //重新給座標軸賦值
            starX = ev.clientX;
            starY = ev.clientY;


            //獲得元素的移動後的位置
            var ml = box.offsetLeft + moveX;
            var mt = box.offsetTop + moveY;



            // 判斷移動邊界範圍
            if (ml > maxX) {
                ml = maxX;
            } else if (ml < 0) {
                ml = 0;
            }

            if (mt > maxY) {
                mt = maxY;
            } else if (mt < 0) {
                mt = 0;
            }

            //將最新的位置 設置到頁面
            box.style.left = ml + "px";
            box.style.top = mt + "px"





        }
    }


    //設置鼠標鬆開 停止移動 清除事件
    window.onmouseup = function() {
        document.onmousemove = null;
    }

    // 窗口改變事件
    window.onresize = function() {
        var maxX = document.documentElement.clientWidth - box.clientWidth;
        var maxY = document.documentElement.clientHeight - box.clientHeight;
    }
</script>

</html>

追加和刪除評論

parentNode.append()可以同時傳入多個節點或字符串，沒有返回值；
parentNode.appendChild()只能傳一個節點，且不直接支持傳字符串；

首先設置點擊事件判斷值是否爲空如果返回值爲空則用選項框提示用戶
創建一個元素追加到夫元素的後面
點擊按鈕用remove()方法移除父元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        h2 {
            color: red;
        }
        
        #critic {
            margin-top: 20px;
            vertical-align: middle;
            resize: none;
        }
        
        h4 {
            color: blue;
            font-size: 25px;
            font-family: "楷體";
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <h2>今日話題：你怎麼看待李小璐和小叔子的戀情</h2>

    <p>用戶暱稱：<input type=text id="nickname"></p>
    <p>用戶評論：<textarea name="" id="critic" cols="20" rows="10"></textarea></p>
    <p><button style="margin-left: 80px;" id="bth">點擊追加評論</button></p>
    <h4>來自廣大網友的心聲</h4>
    <ul id="con">
        <li><strong>暱稱爲堯子陌的網友評論：</strong>賈乃亮的綠帽子帶穩了</li>
    </ul>
</body>
<script>
    //獲取元素的id值
    var nickname = document.getElementById("nickname");
    var critic = document.getElementById("critic");
    var bth = document.getElementById("bth");
    var con = document.getElementById("con");



    bth.onclick = function() {
        if (critic.value == "" || nickname.value == "") {
            alert("用戶名和評論不能爲空");
            return; //這一步驟是爲了判斷值是否爲空 如果有用戶輸入的值則返回值
        };
        //創建一個換行的變量li
        var li = document.createElement("li");
        li.innerHTML = ("<strong>用戶名爲" + critic.value + "的網友評論:</strong>" + "<span>" + nickname.value + "</span>" + "<button class='del'>刪除</button>");
        con.appendChild(li);
        var del = document.getElementsByClassName("del")
      for(var i = 0;i<del.length;i++){
          del[i].onclick=function(){
            this.parentNode.remove()
          }
      }
        // parentNode.append()可以同時傳入多個節點或字符串，沒有返回值；
        //parentNode.appendChild()只能傳一個節點，且不直接支持傳字符串(需要parentNode.appendChild(document.createTextElement('字符串'))代替)，返回追加的Node節點;

    }
</script>

</html>

在指定容器內實現拖拽效果

原理同上

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #box {
            width: 800px;
            height: 600px;
            position: relative;
            margin: 200px auto;
            border: 1px solid red;
            background: url("./image/timg.jpg");
        }
        
        #box2 {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            background-color: rgba(255, 255, 255, 0.5);
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="box2"></div>
    </div>
</body>
<script>
    //獲取元素的id值
    var box = document.getElementById("box");
    console.log(box)
    var box2 = document.getElementById("box2");
    console.log(box2)

    //最大的移動距離
    var maxX = box.clientWidth - box2.clientWidth;
    var maxY = box.clientHeight - box2.clientHeight;

    //設置鼠標按下事件
    document.onmousedown = function(e) {
        var ev = e || event;
        console.log(ev);
        //當前的鼠標坐軸；
        var starX = ev.clientX;
        var starY = ev.clientY;
        console.log(starX);
        console.log(starY);

        //鼠標移動事件
        document.onmousemove = function(e) {
            var ev = e || event;
            var moveX = ev.clientX - starX;
            var moveY = ev.clientY - starY;

            //重新賦值
            starX = ev.clientX;
            starY = ev.clientY;

            //移動的位置
            var ml = box2.offsetLeft + moveX;
            var mt = box2.offsetTop + moveY;

            //進行判斷
            if (ml > maxX) {
                ml = maxX;
            } else if (ml < 0) {
                ml = 0
            }


            if (mt > maxY) {
                mt = maxY
            } else if (mt < 0) {
                mt = 0;
            }

            box2.style.left = ml + "px";
            box2.style.top = mt + "px";

        }
    }
    document.onmouseup = function() {
        document.onmousemove = null;
    }
    window.onresize = function fn() {
        maxX = document.documentElement.clientWidth - box2.clientWidth;
        maxY = document.documentElement.clientHeight - box2.clientHeight;
    }
</script>

</html>

鼠標滑過和鼠標離開的區別

mouseover 事件:不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件(mouseout)
mouseenter 事件:只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。(onmouseleaver)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div.box1 {
            width: 600px;
            height: 600px;
            border: 1px solid red;
            margin: 100px auto;
        }
        
        div.box2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 200px;
        }
        
        p {
            margin-left: 750px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <p>鼠標劃過的事件：<strong style="color:red">0</strong></p>
</body>
<script>
    //獲取元素
    var box1 = document.querySelectorAll(".box1")[0];
    console.log(box1);
    var box2 = document.querySelectorAll(".box2")[0];
    console.log(box2);
    var showCut = document.querySelectorAll("strong")[0];
    console.log(showCut);

    //設置鼠標滑過和鼠標離開事件
    var cont = 0;
    /*  box1.onmouseenter = function fn() {
          showCut.innerHTML = ++cont;
      };*/
    /* box1.onmouseover = function fn() {
         showCut.innerHTML = ++cont;
     }

   /* box1.onmouseenter = function fn() {
        showCut.innerHTML = ++cont;
    }*/
    box1.onmouseover = function fn() {
        showCut.innerHTML = ++cont;
    }

    /*  box2.onmouseenter = function fn() {
          showCut.innerHTML = ++cont;
      };*/
    /* box2.onmouseover = function fn() {
         showCut.innerHTML = ++cont;
     }

   /* box2.onmouseenter = function fn() {
        showCut.innerHTML = ++cont;
    }*/
    box2.onmouseover = function fn() {
        showCut.innerHTML = ++cont;
    }
</script>

</html>

鼠標菜單案例兼容性寫法

兼容性寫法可以完美讓鼠標右鍵菜單消失
oncontextmenu:鼠標右鍵菜單事件


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>
<script>
    document.oncontextmenu = function(e) {
        var ev = e || event;
        console.log(ev);
        //阻止鼠標右鍵的菜單功能
        if (ev.PreventDefault) {
            ev.PreventDefault()
        } else {
            ev.returnValue = false;
        }
        console.log("鼠標菜單消失中")
    }
</script>

</html>

鼠標拖拽圖片功能

唯一不同要用兼容性寫法清除默認行爲
圖片一定要設置寬高

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height：200px;
            cursor: move;
        }
    </style>
</head>

<body>
    <img src="./image/頭像.jpg">
</body>
<script>
    var img = document.getElementsByTagName("img")[0];
    console.log(img);
    var maxX = document.documentElement.clientWidth - img.clientWidth;
    var maxY = document.documentElement.clientHeight - img.clientHeight;
    //獲取元素的id值


    //鼠標按下事件
    img.onmousedown = function(e) {
        var ev = e || event;
        console.log(ev); //打印事件對象；
        //初始的座標軸
        starX = ev.clientX;
        starY = ev.clientY;

        //兼容性寫法
        if (ev.preventDefault) {
            ev.preventDefault();
        } else {
            event.returnValue = false;
        }
        //鼠標移動事件
        document.onmousemove = function(e) {
            var ev = e || event;
            //移動的坐軸
            moveX = ev.clientX - starX;
            moveY = ev.clientY - starY;

            //對座標重新賦值
            starX = ev.clientX;
            starY = ev.clientY;

            //移動後的位置
            var ml = img.offsetLeft + moveX;
            var mt = img.offsetTop + moveY;


            //進行判斷
            if (ml > maxX) {
                ml = maxX;
            } else if (ml < 0) {
                ml = 0
            }


            if (mt > maxY) {
                mt = maxY
            } else if (mt < =0) {
                mt = 0;
            }

            img.style.left = ml + "px";
            img.style.top = mt + "px";
        }


    }

    document.onmouseup = function() {
        document.onmousemove = null;
    }
    window.onresize = function() {
        var maxX = document.documentElement.clientWidth - img.clientWidth;
        var maxY = document.documentElement.clientHeight - img.clientHeight;
    }
</script>

</html>