addEventListener在IE中不起作用(在IE8中测试)

时间:2013-11-23 08:24:29

标签: javascript javascript-events internet-explorer-8 addeventlistener

在Chrome和FF中工作,但不在IE中工作。 Fiddle
我试过here的解决方案,但没有帮助。

    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 = '&nbsp;' // 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>

2 个答案:

答案 0 :(得分:6)

在IE中,事件名称为“onload”,在兼容W3C的浏览器中,它是“加载”,因此:

if (window.addEventListener) {
  window.addEventListener('load', ...);

} else if (window.attachEvent) {
  window.attachEvent('onload', ...);
}

下面是在IE8中添加监听器的更好功能。它将 this 设置为元素,并在使用 attachEvent 更像 addEventListener 时将 event 作为第一个参数传递。它不是 addEventListener 的完全替代品,但是MDN上有一个尝试。我不支持那里的功能(我认为它会在IE 7及更低版本中失败),只是指出它,因为文章中有一些很好的信息。

  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;
    }
  }

答案 1 :(得分:0)

首先做一点研究总是一个好主意。 W3Schools(http://www.w3schools.com/jsref/dom_obj_event.asp)清楚地给出了答案:

  

允许在事件目标上注册事件侦听器(IE8 =   的attachEvent())

要知道使用哪一个,只需使用简单的if语句

if(obj.attachEvent){
    // Attach event code here
}
else{
    // Addeventlistener code here
}