zoukankan      html  css  js  c++  java
  • 03JavaScript程序设计修炼之道 2019-06-27_21-16-52 事件:键盘事件和点击(坐标距离)事件

    17event-object.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>
            * {
                padding: 0;
                margin: 0
            }
    
            body {
                height: 1200px;
            }
    
            div {
                width: 200px;
                height: 200px;
                border: 1px solid pink;
                 margin: 200px;
            }
        </style>
    </head>
    <body>
        <div></div>
        <script>
            /*
            document.onkeyup = function(e) {
                //alert(123);
                //console.log(e);
                var e =  e || event; // 向上兼容
            }
            */
           /*
           document.onclick = function(e) {
                var e = e || event;
                // 单击这点坐标 以页面左上角为参考
                console.log(e.pageX + ":" + e.pageY);
                // 以屏幕左上角为参考
                console.log(e.screenX + ":" + e.screenY);
                // 可视区域
                console.log(e.clientX + ":" + (e.clientY+document.documentElement.scrollTop));
           }
           */
    
           var oDiv = document.querySelector("div");
           oDiv.onclick = function(e) {
               var e = e || event;
               console.log(e.offsetX + ":" + e.offsetY);
           }
        </script>
    </body>
    </html>

     

  • 相关阅读:
    get与post区别
    移动应用专项测试的思路和方法
    一个完整的http请求响应过程
    Linux基础
    浏览器输入url按回车背后经历了哪些?
    三大浏览器(火狐-谷歌-IE浏览器)驱动版本下载
    boost-序列化
    HTTP 2.0
    http首部字段
    与http协作的web服务器
  • 原文地址:https://www.cnblogs.com/HiJackykun/p/11108874.html
Copyright © 2011-2022 走看看