解决 FireFox 下[使用event很麻烦] 的问题.


Posted in Javascript onAugust 22, 2006

在FireFox下编写事件处理函数是很麻烦的事.
因为FireFox并没有 window.event . 如果要得到 event 对象,就必须要声明时间处理函数的第一个参数为event.

所以为了兼容IE与FireFox,一般的事件处理方法为:
btn.onclick=handle_btn_click;
function handle_btn_click(evt)
{
    if(evt==null)evt=window.event;//IE
    //处理事件.
}
对于简单的程序,这不算麻烦.

但对于一些复杂的程序,某写函数根本就不是直接与事件挂钩的.如果要把event传进该参数,那么所有的方法都要把event传来传去..这简直就是噩梦.

下面介绍一个解决这个麻烦事的方法,与原理.

JScript中,函数的调用是有一个 func.caller 这个属性的.
例如 
function A()
{
    B();
}
function B()
{
    alert(B.caller);
}
如果B被A调用,那么B.caller就是A

另外,函数有一个arguments属性. 这个属性可以遍历函数当前执行的参数:
function myalert()
{
    var arr=[];
    for(var i=0;i        arr[i]=myalert.arguments[i];
    alert(arr.join("-"));
}
alert("hello","world",1,2,3)
就能显示 hello-world-1-2-3
(arguments的个数与调用方有关,而与函数的参数定义没有任何关系)

根据这两个属性,我们可以得到第一个函数的event对象:
btn.onclick=handle_click;
function handle_click()
{
    showcontent();
}
function showcontent()
{
    var evt=SearchEvent();
    if(evt&&evt.shiftKey)//如果是基于事件的调用,并且shift被按下
        window.open(global_helpurl);
    else
        location.href=global_helpurl;
}
function SearchEvent()
{
    func=SearchEvent.caller;
    while(func!=null)
    {
        var arg0=func.arguments[0];
        if(arg0)
        {
            if(arg0.constructor==Event) // 如果就是event 对象
                return arg0;
        }
        func=func.caller;
    }
    return null;
}
这个例子使用了SearchEvent来搜索event对象. 其中 'Event' 是 FireFox 的 event.constructor .
在该例子运行时,
SearchEvent.caller就是showcontent,但是showcontent.arguments[0]是空.所以 func=func.caller 时,func变为handle_click .
handle_click 被 FireFox 调用, 虽然没有定义参数,但是被调用时,第一个参数就是event,所以handle_click.arguments[0]就是event !

针对上面的知识,我们可以结合 prototype.__defineGetter__ 来实现 window.event 在 FireFox 下的实现:

下面给出一个简单的代码.. 有兴趣的可以补充

<script>
if(window.addEventListener) 
{ 
    FixPrototypeForGecko(); 
} 
function FixPrototypeForGecko() 
{ 
    HTMLElement.prototype.__defineGetter__("runtimeStyle",element_prototype_get_runtimeStyle); 
    window.constructor.prototype.__defineGetter__("event",window_prototype_get_event); 
    Event.prototype.__defineGetter__("srcElement",event_prototype_get_srcElement); 
} 
function element_prototype_get_runtimeStyle() 
{ 
    //return style instead... 
    return this.style; 
} 
function window_prototype_get_event() 
{ 
    return SearchEvent(); 
} 
function event_prototype_get_srcElement() 
{ 
    return this.target; 
} function SearchEvent() 
{ 
    //IE 
    if(document.all) 
        return window.event; 
    func=SearchEvent.caller; 
    while(func!=null) 
    { 
        var arg0=func.arguments[0]; 
        if(arg0) 
        { 
            if(arg0.constructor==Event) 
                return arg0; 
        } 
        func=func.caller; 
    } 
    return null; 
}
</script>
</body></html>
Javascript 相关文章推荐
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
javascript工具库代码
Mar 29 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 Javascript
Javascript客户端脚本的设计和应用
Aug 21 #Javascript
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 #Javascript
去除链接虚线全面分析总结
Aug 15 #Javascript
静态的动态续篇之来点XML
Aug 15 #Javascript
实用javaScript技术-屏蔽类
Aug 15 #Javascript
巧妙破除网页右键禁用的十大绝招
Aug 12 #Javascript
总结一些js自定义的函数
Aug 05 #Javascript
You might like
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
详解JavaScript中void语句的使用
2015/06/04 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
几种响应式文字详解
2017/05/19 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
jQuery实现评论模块
2020/08/19 jQuery
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
2014年国培研修感言
2014/03/09 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
党员作风建设整改方案
2014/10/27 职场文书
六年级数学教学反思
2016/02/16 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
PyTorch的Debug指南
2021/05/07 Python