zoukankan      html  css  js  c++  java
  • 事件对象

     1 <script>
     2     var btn = document.getElementById('btn');
     3     btn.addEventListener('click', function (ev) { // 事件对象 event
     4          var e = ev || window.event;  // 兼容写法
     5          console.log(e);
     6          console.log(e.type);
     7     });
     8 
     9     btn.addEventListener('mouseover', function (ev) { // 事件对象 event
    10         var e = ev || window.event;  // 兼容写法
    11         // console.log(e.target);
    12         console.log(e.type);
    13     })
    14 </script>
    1 e.screenX + ',' + e.screenY  相对于屏幕的宽度和高度
    2 
    3 e.clientX + ',' + e.clientY  相对于浏览器的宽度和高度(无论滚动多少,只是相对与浏览器)
    4 
    5 e.pageX + ',' + e.pageY  在页面没有滚动的时候是和clientX、与clientY是一样的

    在盒子内获取光标的位置

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title></title>
     6     <style>
     7         body{
     8             /*margin-top: 1000px;*/
     9         }
    10         #box {
    11              500px;
    12             height: 500px;
    13             background-color: red;
    14             margin: 100px;
    15         }
    16     </style>
    17 </head>
    18 <body>
    19 <div id="box"></div>
    20 <script>
    21     var box = document.getElementById('box');
    22     box.addEventListener('mousemove', function (ev) {
    23         var e = ev || window.event;
    24         var x = e.pageX - box.offsetLeft;
    25         var y = e.pageY - box.offsetTop;
    26         box.innerText = '(' + x + ',' + y + ')';
    27     });
    28 </script>
    29 </body>
    30 </html>

  • 相关阅读:
    java中的几种对象(PO,VO,DAO,BO,POJO)
    【转】Spring boot 打成jar包问题总结
    mac 上安装lua
    Mac下更新Vim到最新版本
    刘以鬯和香港文学
    权重随机算法的java实现
    MySQL具体解释(7)-----------MySQL线程池总结(一)
    IIS PHP 配置 问题总结
    HDU 3622 Bomb Game(2-sat)
    poj 2388 Who&#39;s in the Middle
  • 原文地址:https://www.cnblogs.com/zhangzhengyang/p/11198463.html
Copyright © 2011-2022 走看看