阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript 鼠标跟随移动

      1

      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title></title>
          <style>
              #div1{width: 200px;height: 200px;background: orange;}
          </style>
      </head>
      <body>
      <div id="div1"></div>
      </body>
      </html>
      <script>
          var oDiv=document.getElementById("div1");
          oDiv.onmousemove=function(event){
              //直接把一个方法赋值给一个事件属性.这个方法运行的时候,浏览器会自动的给这个方法传一个对象;这个对象就是事件对象;
              event=event||window.event;//IE下的事件对象,是一个全局的event;这种的是兼容写法;
              event.clientX;//鼠标的X轴坐标;
              event.clientY;//鼠标的Y轴坐标;
              //时间有即时行;
              event.type;//事件类型;只和当时发生的类型有关;只能同时处理一个事件;
              this.innerHTML="X:"+event.clientX+" Y:"+event.clientY;
          };
      
          document.documentElement.onkeydown= function (event) {
              event=event||window.event;
              oDiv.innerHTML=event.keyCode;
          }
      
      </script>
      

      2

      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title></title>
          <style>
              #div1{width: 200px;height: 200px;background: orange;}
              #newDiv{width: 400px;height: 400px;background: red;position: absolute;color: black;}
          </style>
      </head>
      <body>
      <div id="div1"></div>
      </body>
      </html>
      <script>
          var oDiv=document.getElementById("div1");
          var flag=1;
          oDiv.onmouseover=function(event) {
              if(flag){
                  var event=event||window.event;
                  var newDiv=document.createElement("div");
                  newDiv.id="newDiv";
                  newDiv.innerHTML="哈哈哈哈哈哈哈哈哈哈";
                  newDiv.style.left=event.clientX+"px";
                  newDiv.style.top=event.clientY+"px";
                  document.body.appendChild(newDiv);
                  flag=0;
              }
          };
          oDiv.onmousemove=function(event) {
              event=event||window.event;
              var newDiv=document.getElementById("newDiv");
              newDiv.style.left=event.clientX+10+"px";
              newDiv.style.top=event.clientY+20+"px";
          };
          oDiv.onmouseout= function (event) {
              document.body.removeChild(newDiv);
              flag=1;
          };
      
          //pageX;pageY;鼠标距离文档(当前页面的)最上角的距离;不支持IE678;
          //clientX;clientY;指的是浏览器;
          //onmouseover和onmouseenter区别;over会传播,enter是不传播的;
          //onmouseout和onmouselive区别;
      
          // onmouseover和onmouseenter很像,但是可以避免onmouseover的一些问题;
          // 如果是从父元素到子元素,不会触发onmouseover;
          // 如果是从子元素到父元素,也不会触发onmouseover;
      
          //阻止事件传播/冒泡的方法;
      /*    this.appendChild(ele);
          ele.onmouseover=function(event){
              event=event||window.event;
              if(event.stopPropagation){
                  event.stopPropagation();//标准留言器中禁止冒泡;
                  //stopPropagation是禁止传播的意思;
                  // preventDefault中文意思是阻止默认行为;
              }else{
                  event.cancelBubble=true;//IE浏览器禁止冒泡;IE678;cancelBubble中文是取消冒泡的意思;
              }
          }*/
      </script>
      
      目录
      本文目录
      目录