『笔记』JavaScript基础学习笔记 6
侧边栏壁纸
  • 累计撰写 61 篇文章
  • 累计收到 1,246 条评论

『笔记』JavaScript基础学习笔记 6

六六丶
2021-11-17 / 0 评论 / 250 阅读 / 正在检测是否收录...
广告
温馨提示:
本文最后更新于2021年11月26日,已超过57天没有更新,若内容或图片失效,请留言反馈。

DOM(文本对象模型)

(20)鼠标拖拽的事件

拖拽(一、二)

<html>
  <head>
    <style>
      #box1{
        width:100px;
        height:100px;
        background-color:red;
        position:absolute;
      }
      #box2{
        width:100px;
        height:100px;
        background-color:yellow;
        position:absolute;
        left:200px;
        top:200px;
      }
    </style>
    <script>
      window.onload = function(){
        // 拖拽box1
        /* 拖拽的流程:
        1.当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown
        2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
        3.当鼠标松开时,被拖拽元素国定在当前位置 onmouseup
        */
        // 获取box1
        var box1 = document.getElementById("box1");
        // 当鼠标在被拖拽元素上按下时,开始拖拽
        box1.onmousedown = function(event){
          // 设置box1捕获所有鼠标按下的事件
          // setCapture()只有IE支持,Chrome不支持会报错
          // 当调用一个元素的setCapture()方法后,这个元素将会把下一次所有的鼠标按下的事件捕获到自身上
          /*if(box1.setCapture){
            box1.setCapture();
          }*/
          box1.setCapture && box1.setCapture();
          event = event || window.event;
          // div的水平偏移量:鼠标.clientX - 元素.offsetLeft
          // div的垂直偏移量:鼠标.clientY - 元素.offsetTop
          var ol = event.clientX - box1.offsetLeft;
          var ot = event.clientY - box1.offsetTop;
          // 为document绑定一个onmousemove事件
          document.onmousemove = function(event){
            event = event || window.event;
            // =当鼠标移动时被拖拽元素跟随鼠标移动
            // 获取鼠标的坐标
            var left = event.clientX - ol;
            var top = event.clientY - ot;
            // 修改box1的位置
            box1.style.left = left+"px";
            box1.style.top = top+"px";
          };
          // 为元素绑定一个鼠标松开事件
          document.onmouseup = function(){
            // 当鼠标松开时,被拖拽元素国定在当前位置
            // 取消document的onmousemove事件
            document.onmousemove = null;
            // alert("鼠标松开了");
            // 取消document的onmouseup事件
            document.onmouseup = null;
            // 当鼠标松开时,取消对事件的捕获
            box1.releaseCapture && box1.releaseCapture();
          };
          // 当拖拽一个网页中的内容,浏览器会默认去搜索页面,会导致拖拽功能的异常,这是浏览器的默认行为
          // 如果不希望这个行为发生,则可以通过return false来取消默认行为
          // 但是不支持IE8及以下浏览器
          return false;
        };
      };
    </script>
  </head>
  <body>
    我是一段文字
    <div id="box1"></div>
    <div id="box2"></div>
  </body>
</html>

box的偏移量=鼠标的偏移量-元素的偏移量

kw4zgpnw.png

捕获测试

<html>
  <head>
    <script>
      window.onload = function(){
        // 分别为两个按钮绑定单击响应函数
        var btn01 = document.getElementById("btn01");
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function(){
          alert(1);
        };
        btn02.onclick = function(){
          alert(2);
        };
        // 设置btn01对鼠标按下相关的事件进行捕获
        // 当调用一个元素的setCapture()方法后,这个元素将会把下一次所有的鼠标按下的事件捕获到自身上
        btn01.setCapture();
      };
    </script>
  </head>
  <body>
    <button id="btn01">按钮01</button>
    <button id="btn02">按钮02</button>
  </body>
</html>

拖拽(三)

<html>
  <head>
    <style>
      #box1{
        width:100px;
        height:100px;
        background-color:red;
        position:absolute;
      }
      #box2{
        width:100px;
        height:100px;
        background-color:yellow;
        position:absolute;
        left:200px;
        top:200px;
      }
    </style>
    <script>
      window.onload = function(){
        // 拖拽box1
        /* 拖拽的流程:
        1.当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown
        2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
        3.当鼠标松开时,被拖拽元素国定在当前位置 onmouseup
        */
        // 获取box1
        var box1 = document.getElementById("box1");
        // 获取box1
        var box1 = document.getElementById("box1");
        // 获取imh1
        var img1 = document.getElementById("img1");
        // 开启box1的拖拽
        drag(box1);
        // 开启box2的拖拽
        drag(box2);
        // 开启img1的拖拽
        drag(img1);
      };
      // 提取一个专门用来设置拖拽的函数
      // 参数:开启拖拽的元素
      function drag(obj){
        // 当鼠标在被拖拽元素上按下时,开始拖拽
        obj.onmousedown = function(event){
          // 设置box1捕获所有鼠标按下的事件
          // setCapture()只有IE支持,Chrome不支持会报错
          // 当调用一个元素的setCapture()方法后,这个元素将会把下一次所有的鼠标按下的事件捕获到自身上
          /*if(box1.setCapture){
            box1.setCapture();
          }*/
          obj.setCapture && obj.setCapture();
          event = event || window.event;
          // div的水平偏移量:鼠标.clientX - 元素.offsetLeft
          // div的垂直偏移量:鼠标.clientY - 元素.offsetTop
          var ol = event.clientX - obj.offsetLeft;
          var ot = event.clientY - obj.offsetTop;
          // 为document绑定一个onmousemove事件
          document.onmousemove = function(event){
            event = event || window.event;
            // =当鼠标移动时被拖拽元素跟随鼠标移动
            // 获取鼠标的坐标
            var left = event.clientX - ol;
            var top = event.clientY - ot;
            // 修改box1的位置
            obj.style.left = left+"px";
            obj.style.top = top+"px";
          };
          // 为元素绑定一个鼠标松开事件
          document.onmouseup = function(){
            // 当鼠标松开时,被拖拽元素国定在当前位置
            // 取消document的onmousemove事件
            document.onmousemove = null;
            // alert("鼠标松开了");
            // 取消document的onmouseup事件
            document.onmouseup = null;
            // 当鼠标松开时,取消对事件的捕获
            obj.releaseCapture && obj.releaseCapture();
          };
          // 当拖拽一个网页中的内容,浏览器会默认去搜索页面,会导致拖拽功能的异常,这是浏览器的默认行为
          // 如果不希望这个行为发生,则可以通过return false来取消默认行为
          // 但是不支持IE8及以下浏览器
          return false;
        };
      };
    </script>
  </head>
  <body>
    我是一段文字
    <div id="box1"></div>
    <div id="box2"></div>
    <img src="https://cdn.jsdelivr.net/gh/aill66/cdn@latest/usr/uploads/2021/08/809131067.png" id="img1" style="width:100px; position:absolute;"
  </body>
</html>
(21)滚轮的事件
<html>
  <head>
    <style>
      #box1{
        width:100px;
        height:100px;
        background-color:red;
      }
    </style>
    <script>
      window.onload = function(){
        // 当鼠标滚轮向下滚动时box1变长,当滚轮向上滚动时box1变短
        var box1 = document.getElementById("box1");
        // 为box1绑定一个鼠标滚动事件
        /*onmousewheel鼠标滚轮滚动事件,会在鼠标滚轮滚动时触发,火狐不支持
        *
        **在火狐中需要使用DOMMouseScroll来绑定滚轮滚动事件
        **该事件需要通过addEventListener()函数来绑定
        */
        /*function fun(){
          alert("我滚了");
        };
        box1.onmousewheel = fun;
        bind(box1,"DOMMouseScroll",fun);
        */
        box1.onmousewheel = function(event){
          event = event || window.event;
          // alert("我滚了");
          // 判断鼠标滚轮的滚动方向
          // event.wheelDelta 可以获取鼠标滚轮滚动的方向
          // 向上滚动为正值,向下滚动为负值
          // alert(event.wheelDelta);
          // 火狐中不支持wheelDelta
          /*火狐中使用event.detail来获取滚轮滚动的方向
          **向上滚动为负值,向下滚动为正值
          */
          // alert(event.detail);
          // 当鼠标滚轮向下滚动时box1变长,当滚轮向上滚动时box1变短
          if(event.wheelDelta > 0 || event.detail < 0){
            // alert("向上滚");
            // 向上滚box1变短
            box1.style.height = box1.clientHeight - 10 + "px";
          }else{
            // alert("向下滚");
            // 向下滚box1变长
            box1.style.height = box1.clientHeight + 10 + "px";
          }
          // 使用addEventListener()方法绑定的响应函数,取消默认行为时不能使用return false;
          // 需要使用event.preventDefault();来取消,不支持IE8及以下浏览器
          event.preventDefault && event.preventDefault();//取消火狐的默认行为
          // 当滚轮滚动时,如果浏览器有滚动条,浏览器的滚动条会随着滚动
          // 这是浏览器默认行为,可以使用return false;取消默认行为
          return false;
        };
        // 为火狐绑定滚轮事件
        bind(box1,"DOMMouseScroll",box1.onmousewheel)
      };
      function bind(obj,eventStr,callback){
        if(obj.addEventListener){
          // 大部分浏览器兼容的方式
          obj.addEventListener(eventStr,callback,flase);
        }else{
          // this是由调用方式决定
          // 可以使用匿名函数调用回调函数,这样就可以指定this
          // IE8及以下浏览器,加一个on
          // obj.attachEvent("on"+eventStr,callback);
          obj.attachEvent("on"+eventStr,function(){
            // 在匿名函数中调用回调函数
            callback.call(obj);
          });
        }
      };
    </script>
  </head>
  <body style="height:2000px">
    <div id="box1"></div>
  </body>
</html>
(22)键盘的事件
<html>
  <head>
    <script>
      window.onload = function(){
        /* 键盘事件
        onkeydown 按键被按下,如果一直按着某个按键不松手,事件会一直触发
        当onkeydown连续触发时,第一次和第二次之间会间隔稍微长一点,其他的会非常快触发,是为了防止误操作的发生
        onkeyup 按键被松开,松开一次触发一次
        键盘事件一般都会绑定给一些可以获取到焦点的对象或者document
        */
        document.onkeydown = function(event){
          event = event || window.event;
          // 可以通过keyCode来获取按键的编码,通过它可以判断哪个按键被按下
          // 除了keyCode,事件对象中还提供了几个固定属性
          /*altKey 按键Alt是否被按下
          **ctrlKy 按键Ctrl是否被按下
          **shiftKey 按键Shift是否被按下
          如果被按下则返回true否则返回false
            */
          // 判断y键是否被按下
          // 判断y键和Ctrl键是否被同时按下
          if(event.keyCode == 89 && event.ctrlKey){
            console.log("按键y和Ctrl都被按下了");
          }
        };
        document.onkeyup = function(){
          console.log("按键被松开了");
        };
        // 获取input
        var input = document.getElementsByTagName("input")[0];
        input.onkeydown = function(event){
          event = event || window.event;
          console.log("按键被按下");
          // 数字的keycode为48-57
          // 使文本框中不能输入数字
          if(event.keyCode >= 48 && event.keyCode <= 57){
            // 在文本框中输入内容属于onkeydown的默认行为
            // 如果在onkeydown中取消了默认行为,则输入的内容不会出现在文本框中
            return false;
          }
        };
      };
    </script>
  </head>
  <body>
    <!-- <div style="width:100px;height:100px;background-color:red;" id="box1"></div> -->
    <input type="text" />
  </body>
</html>

键盘移动vid

<html>
  <head>
    <style>
      #box1{
        width:100px;
        height:100px;
        background-color:red;
        position:absolute;
      }
    </style>
    <script>
      // 使div可以根据不同的方向键向不同的方向移动
      var box1 = document.getElementById("box1");
      document.onkeydown = function(event){
        event = event || window.event;
        // 定义一个变量来表示移动的速度
        var speed = 20;
        // 当用户按了Ctrl以后速度加快
        if(event.ctrlKey){
          spend = 200;
        }
        // keyCode 37左  38上  39右  40下
        switch(event.keyCode){
          case 37:
            // alert("向左");
            box1.style.left = box1.offsetLeft -speed +"px";
            break;
          case 39:
            // alert("向右");
            box1.style.left = box1.offsetLeft +speed +"px";
            break;
          case 38:
            // alert("向上");
            box1.style.top = box1.offsetTop -speed +"px";
            break;
          case 40:
            // alert("向下");
            box1.style.top = box1.offsetTop +speed +"px";
            break;
        }
      };
    </script>
  </head>
  <body>
    <div id="box1"></div>
  </body>
</html>

8

打赏

评论 (0)

取消