firefox浏览器兼容event事件方法

firefox浏览器没有window.event对象,但是我们可以给函数的第一个参数传递个event来实现,但是总觉着不方便。搜索后发现有人实现了,觉着写的不错,以下是具体方法。

自然,我们都习惯了 IE,在 IE 中要在函数中获得各事件对象很容易,直接用 event、event.srcElemtn、event.fromElement、event.toElement 就行了。在 FireFox 中获得触发事件的元素可以用 event.target,但其他两个 fromElement 和 toElement 就要费些周折。

所以,为了保持一致的使用方式,也为了保持原有的使用习惯,我们加入以下 JS 代码(代码有些紧凑,未加注释,应该很好理解):

<script language="javascript">
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);
  Event.prototype.__defineGetter__("fromElement", element_prototype_get_fromElement);
  Event.prototype.__defineGetter__("toElement", element_prototype_get_toElement);
}
function element_prototype_get_runtimeStyle() {
  return this.style;
}
function window_prototype_get_event() {
  return SearchEvent();
}
function event_prototype_get_srcElement() {
  return this.target;
}
function element_prototype_get_fromElement() {
  var node;
  if (this.type == "mouseover") node = this.relatedTarget;
  else if (this.type == "mouseout") node = this.target;
  if (!node) return;
  while (node.nodeType != 1) node = node.parentNode;
  return node;
}
function element_prototype_get_toElement() {
  var node;
  if (this.type == "mouseout") node = this.relatedTarget;
  else if (this.type == "mouseover") node = this.target;
  if (!node) return;
  while (node.nodeType != 1) node = node.parentNode;
  return node;
}
function SearchEvent() {
  if (document.all) return window.event;
  func = SearchEvent.caller;
  while (func != null) {
    var arg0 = func.arguments[0];
    if (arg0 instanceof Event) {
      return arg0;
    }
    func = func.caller;
  }
  return null;
}
</script>

好了,现在不管是在 IE 中还是在 FireFox 中,触发事件后都有了 event、event.srcElement、event.fromElement、event.toElement 属性了。这就来做个测试吧:

<script>
function test() {
  alert("event:" + event + ", srcElement:" + event.srcElement.innerHTML + ", fromElement:" + event.fromElement.innerHTML + ", toElement:" +   event.toElement.innerHTML)
}
</script>
<button οnmοuseοut="test()">MouseOut</button>
<button οnmοuseοver="test()">MouseOver</button>

经个人测试,在火狐下完美运行,以后不用必须给函数的第一个参数传递event了。

 

转载于:https://www.cnblogs.com/heaventear/archive/2013/04/04/2999430.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值