addEventListener没有'不能在IE中工作(在IE8中测试)
addEventListener doesn't work in IE (tested in IE8)
在Chrome和Firefox中工作,但不能在IE中工作。Fiddle
我已经尝试过这个解决方案,但无济于事
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兼容的浏览器中为"load",因此:
if (window.addEventListener) {
window.addEventListener('load', ...);
} else if (window.attachEvent) {
window.attachEvent('onload', ...);
}
下面是在IE8中添加侦听器的更好功能。它将this设置为元素,并在使用attachEvent时将事件作为第一个参数,使其更像addEventListener。它不是addEventListener的完全替代品,但在MDN上有一个尝试。我并不支持那里的功能(我认为它在IE7及更低版本中会失败得很惨),只是指出它,因为文章中有一些好的信息。
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;
}
}
先做一些研究总是个好主意。W3学校(http://www.w3schools.com/jsref/dom_obj_event.asp)清楚地给出了答案:
允许在事件目标(IE8)上注册事件侦听器=attachEvent())
为了知道要使用哪一个,只需使用一个简单的if语句
if(obj.attachEvent){
// Attach event code here
}
else{
// Addeventlistener code here
}
相关文章:
- IE8更改文本区域上的事件侦听器不工作
- window.onbeforeunload在IE8中不触发(在Firefox,Chrome和Safari中工作正常)
- $('body').on('blur')在IE8中工作不好
- window.location重定向没有'我不在IE8上工作
- addEventListener没有'不能在IE中工作(在IE8中测试)
- Requirejs和主干应用程序,不能在IE8中工作
- 无法在 IE 9 中传递此运算符的值,而它在 IE7 和 IE8 中工作正常
- Request.UrlReferrer在IE8中无法正常工作,并且工作正常IE9
- 不触发 OnClick 事件 IE8,但在 Firefox 中工作正常
- 如何优化我的jQuery以始终在IE8中工作,目前它被击中和错过
- 获取尾随逗号(在JavaScript中)在IE7 / IE8中工作
- FormData ajax 上传 IE8 -> 替代品及其工作原理
- jquery设置隐藏的输入值在IE7和IE8中未按预期工作
- 在 IE8 中单选按钮上更改无法正常工作
- 如何让 jQuery methos text() 函数在 IE8 中工作
- 重写一个Javascript函数,该函数可以选择在IE8中工作的活动导航选项卡
- 修复了在页面底部加载时html5标签IE8不工作的问题
- js库无法在IE8中工作
- 输入类型=“file".submit()不工作IE8
- 让cufon在IE7中工作IE8 -我已经按照文档做了所有的事情