addEventListener在IE中不起作用（在IE8中测试） [英] addEventListener doesn't work in IE (tested in IE8)
本文介绍了addEventListener在IE中不起作用（在IE8中测试）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在Chrome和FF中工作，但不在IE中工作。 小提琴
我试过这里但没有帮助。
Work in Chrome and FF but not in IE. Fiddle
I have tried solution from here but doesn't help.
if(window.attachEvent){
// Attach event code here
window.attachEvent("load", toolify);
}
else{
// Addeventlistener code here
window.addEventListener('load',toolify,false);
}
来自IE的错误：
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
Timestamp: Sat, 23 Nov 2013 08:10:42 UTC
Message: Object doesn't support this property or method
代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Website</title>
<script>
"use strict";
function click(event) {
var elem = this.parentNode.querySelector('div.info_container');
if (elem) elem.style.display = elem.style.display === 'block' ? 'none' : 'block';
}
function toolify() {
var idx,
len,
elem,
info,
text,
elements = document.querySelectorAll('div.tooltip'),
canvas,
imgurl,
pointer,
tipHeight = 20,
tipWidth = 20,
width = 200,
height = 100,
ctx;
// Create a canvas element where the triangle will be drawn
canvas = document.createElement('canvas');
canvas.width = tipHeight;
canvas.height = tipWidth;
ctx = canvas.getContext('2d');
ctx.strokeStyle = '#000'; // Border color
ctx.fillStyle = '#fff'; // background color
ctx.lineWidth = 1;
ctx.translate(-0.5,-0.5); // Move half pixel to make sharp lines
ctx.beginPath();
ctx.moveTo(1,canvas.height); // lower left corner
ctx.lineTo(canvas.width, 1); // upper right corner
ctx.lineTo(canvas.width,canvas.height); // lower right corner
ctx.fill(); // fill the background
ctx.stroke(); // stroke it with border
//fix bottom row
ctx.fillRect(0,canvas.height-0.5,canvas.width-1,canvas.height+2);
// Create a div element where the triangel will be set as background
pointer = document.createElement('div');
pointer.style.width = canvas.width + 'px';
pointer.style.height = canvas.height + 'px';
pointer.innerHTML = ' ' // non breaking space
pointer.style.backgroundImage = 'url(' + canvas.toDataURL() + ')';
pointer.style.position = 'absolute';
pointer.style.top = '2px';
pointer.style.right = '1px';
pointer.style.zIndex = '1'; // place it over the other elements
for (idx=0, len=elements.length; idx < len; ++idx) {
elem = elements[idx];
elem.querySelector('img').addEventListener('click',click);
text = elem.querySelector('div.info');
// Create a new div element, and place the text and pointer in it
info = document.createElement('div');
text.parentNode.replaceChild(info,text);
info.className = 'info_container';
info.appendChild(pointer.cloneNode());
info.appendChild(text);
//info.addEventListener('click',click);
}
}
window.addEventListener('load',toolify);
</script>
<style>
div.tooltip
{
position:relative;
display:inline-block;
width:300px;
text-align:right;
}
div.tooltip > div.info
{
display:none;
}
div.tooltip div.info_container
{
position:absolute;
right:20px;
width:200px;
height:100px;
display:none;
}
div.tooltip div.info
{
text-align:left;
position:absolute;
left:1px;
right:1px;
top:20px;
bottom:1px;
color:#000;
padding:5px;
overflow:auto;
border:1px solid #000;
}
</style>
</head>
<body>
<div class='tooltip'>
<img src='http://www.craiglotter.co.za/wp-content/uploads/2009/12/craig_question_mark_icon1.png' alt='Help'/>
<div class='info'>
Some text to fill the box with.
</div>
</div>
<div class='tooltip'>
<img src='http://www.craiglotter.co.za/wp-content/uploads/2009/12/craig_question_mark_icon1.png' alt='Help'/>
<div class='info'>
Some text to fill the box with.
</div>
</div>
</body>
<html>
推荐答案
在IE中，事件名称为onload，在兼容W3C的浏览器中，它是加载，所以：
In IE, the event name is "onload", in W3C compliant browsers it's "load", so:
if (window.addEventListener) {
window.addEventListener('load', ...);
} else if (window.attachEvent) {
window.attachEvent('onload', ...);
}
下面是在IE8中添加监听器的更好功能。它将 this 设置为元素，并在使用 attachEvent 更像 addEventListener 时将 event 作为第一个参数传递。这不是对的的addEventListener 的完全替代，但有一个在上的 MDN 。我不支持那里的功能（我认为它会在IE 7及更低版本中失败），只是指出它，因为文章中有一些很好的信息。
A better function for adding listeners in IE8 is below. It sets this to the element and passes event as the first parameter when using attachEvent to be more like addEventListener. It's not a full replacement for addEventListener, but there's an attempt at one on MDN. I'm not endorsing the function there (I think it will fail miserably in IE 7 and lower), just pointing it out as there is some good information in the article.
function addListener(element, event, fn) {
// Use addEventListener if available
if (element.addEventListener) {
element.addEventListener(event, fn, false);
// Otherwise use attachEvent, set this and event
} else if (element.attachEvent) {
element.attachEvent('on' + event, (function (el) {
return function() {
fn.call(el, window.event);
};
}(element)));
// Break closure and primary circular reference to element
element = null;
}
}
这篇关于addEventListener在IE中不起作用（在IE8中测试）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
