Question

在此代码中，Firefox将“this”视为已单击的元素，并以正确的方式传递href属性。

IE似乎认为'这个'为[对象窗口]而不是。如何在两种浏览器中以相同的方式使用它？

注意：jQuery很可爱，但不适合这个项目

var printElem = getElementsByClassName('print', 'a');
for(i in printElem){
    ObserveEvent(printElem[i], 'click', function(e){
        window.open(this.href, '', 'location=0,menubar=1,resizable=1,scrollbars=1,width='+810+',height='+700);
        cancelEvent(e);
    });
}

Answer 1

您可以使用event target，如下所示：

    ObserveEvent(printElem[i], 'click', function(e){
            var target = e.target || e.srcElement;
            window.open(target.href, '', 'location=0,menubar=1,resizable=1,scrollbars=1,width='+810+',height='+700);
            cancelEvent(e);
    });

Answer 2

问题几乎肯定源于使用IE ObserveEvent方法的attachEvent函数，该方法（与其他浏览器中的addEventListener不同）未将this设置为对象在事件处理程序中观察到。

Answer 3

我在这里加上我的两分钱，因为我认为你可以使用它。

有一个contest 4 years ago看谁能写出最好的addEvent实现。它试图解决的主要问题之一是在事件处理程序中保留this。

这是由jQuery的创建者编写的one contest entry：

function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
    obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}

（当然是对称的）：

function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
    obj.detachEvent( 'on'+type, obj[type+fn] );
    obj[type+fn] = null;
  } else
    obj.removeEventListener( type, fn, false );
}

如果您愿意，可将其重命名为“ObserveEvent”。

你有它，一个8行实现，你可以放入你的代码库 - 没有库，没有框架。您处理程序中的this引用工作正常。

Answer 4

另一个选择：创建一个闭包来为每个元素的处理程序确定元素的范围：

var printElem = getElementsByClassName('print', 'a');
for(var i in printElem){
  (function(elem) { // elem === printElem[i] at time of execution later
    ObserveEvent(elem, 'click', function(e){
      window.open(elem.href, '', 'location=0,menubar=1,resizable=1,scrollbars=1,width='+810+',height='+700);
      cancelEvent(e);
    });
  })(printElem[i]); // immediately call the temp function with our element
}

IEs了解'这个'

4 个答案: