Firefox element.event有效，但element.addEventlistener无效

Question

我在Firefox中遇到addEventListener的问题。我在自己的网站上拥有一个自己建立的WYSIWYG区域的iframe。

我希望iframe看起来更像普通的文本区域，所以我希望iframe周围有边框。这样找到第一个tp（textpreview）（效果很好）：

var tp = document.getElementById('iframe-textpreview');
var iframe = tp;    

if(tp.contentDocument){ // normal
    tp = tp.contentDocument;
}
else if(tp.contentWindow){ // old IE
    tp = tp.contentWindow.document; 
}
//Open and close for Firefox
tp.open();
tp.close();
tp.designMode = 'on';

然后，我尝试附加一个eventlistener并在事件触发时进行记录。在Chrome，Opera和最新的IE中有效，但在Firefox中无效：

//Doesn't work in Firefox
tp.body.addEventListener('focus', function(){ console.log('focus...')});
tp.body.addEventListener('blur', function(){ console.log('blur...')});

但是这确实起作用：

//Firefox
tp.body.onfocus = function(){ console.log('focus...')};
tp.body.onblur = function(){ console.log('blur...')};

我已经清除了Firefox上的缓存，并尝试使用另一台计算机，但仍然无法使第一个选项正常工作。

Answer 1

Firefox由于某种原因不会在body元素上触发事件处理程序，相反，您必须将事件处理程序附加到iframe本身或iframe内的实际元素上。

专注于iframe本身，而不是正文，似乎适用于所有浏览器

tp.addEventListener('focus', function(){ console.log('focus...')});
tp.addEventListener('blur', function(){ console.log('blur...')});