zoukankan      html  css  js  c++  java
  • JS——event

    触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息:

    普通浏览器支持 event(传参),IE678支持 window.event(无参),兼容写法:

    <script>
        var divEle = document.getElementsByTagName("div")[0];
        divEle.onclick = function (e) {
            e = e || window.event;
            console.log(e);
        }
    </script>

    client、page、screen三者之间的区别:

    clientX/clientY:当前窗口(可视区域)的左上角为基准点
    
    pageX/pageY:在不拖动情况下同上,在拖动的情况下,会越来越大
    
    screenX/screenY:当前屏幕左上角为基准点

    pageX、pageY在IE678中不支持,兼容写法:被卷去的部分+可视区域坐标

    <script>
        document.onclick = function (e) {
            e = e || window.event;
            var pageY = e.pageY || scroll().top + e.clientY;
            console.log(pageY);
        }
    
        function scroll() {
            return {
                "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
                "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
            };
        }
    </script>

    特别补充:offsetX/offsetY,以触发事件的元素左上角为基准点

    <script>
        var divEle = document.getElementsByTagName("div")[0];
        divEle.onclick = function (e) {
            e = e || window.event;
            console.log(e.offsetY);
        }
    </script>

     

  • 相关阅读:
    C#类继承情况下构造函数的执行过程
    vs快捷键大全(分类导航)
    vs常用快捷键
    Entity Framework实体无限循环问题
    entity framework实现left join功能
    理解requireJS-实现一个简单的模块加载器
    petshop4.0(王福朋)
    代码覆盖率工具 Istanbul 入门教程
    .net微信开发
    numpy的用法(一)
  • 原文地址:https://www.cnblogs.com/wuqiuxue/p/7975991.html
Copyright © 2011-2022 走看看