• Netscape中使用event对象


    在 IE 中,我们使用 event 对象很简单,直接调用即可,但在 Netscape(NS) 和 FireFox(FF) 中,则不会达到预期的效果。看如下示例,点击鼠标会弹出对话框显示鼠标指针的横坐标,但在 NS 和 FF 中就不起作用。

    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Netscape中使用event对象</title>
    </head>

    <body>

    <div>
    <a href="http://www.cftea.com/" target="_blank">千一网络 http://www.cftea.com/ 专业探讨【ASP、JavaScript、XHTML+CSS、SQL Server】</a>
    <hr>
    </div>

    在空白处点击鼠标
    <script type="text/javascript" language="javascript">
    <!--
    function Foo()
    {
        alert("当前鼠标指针的横坐标是:" + event.clientX);
    }

    document.body.onclick = Foo;
    -->
    </script>
    </body>

    </html>

    现在有两种方法使程序兼容,第一种

    <html>

    第二种是将 event 作为参数来传递,看示例:

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Netscape中使用event对象</title>
    </head>

    <body onclick="javascript:Foo();">

    <div>
    <a href="http://www.cftea.com/" target="_blank">千一网络 http://www.cftea.com/ 专业探讨【ASP、JavaScript、XHTML+CSS、SQL Server】</a>
    <hr>
    </div>

    在空白处点击鼠标
    <script type="text/javascript" language="javascript">
    <!--
    function Foo()
    {
        var theEvent = window.event || arguments.callee.caller.arguments[0];
        alert("当前鼠标指针的横坐标是:" + theEvent.clientX);
    }
    -->
    </script>
    </body>

    </html>

     第二种是将 event 作为参数来传递,看示例:

    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Netscape中使用event对象</title>
    </head>

    <body onclick="javascript:Foo(event);">

    <div>
    <a href="http://www.cftea.com/" target="_blank">千一网络 http://www.cftea.com/ 专业探讨【ASP、JavaScript、XHTML+CSS、SQL Server】</a>
    <hr>
    </div>

    在空白处点击鼠标
    <script type="text/javascript" language="javascript">
    <!--
    function Foo(e)
    {
        alert("当前鼠标指针的横坐标是:" + e.clientX);
    }
    -->
    </script>
    </body>

    </html>

    注意:两种方法中,调用函数的方式均不再是 document.body.onclick = Foo。
  • 相关阅读:
    Angularjs中添加ckEditor插件
    Angularjs中添加HighCharts
    ngTbale真分页实现排序、搜索等功能
    移动端小功能杂记(三)
    Html5 history Api简介
    移动端流程页处理
    Html5离线缓存简介
    多Tabs的横向滚动插件(支持Zepto和jQuery)
    flutter从零开始第一篇-环境搭建(Windows)
    vue 父子组件与全局数据传递共享
  • 原文地址:https://www.cnblogs.com/chenlulouis/p/1585916.html
Copyright © 2020-2023  润新知