MSIE和addEventListener在JavaScript中有问题吗？

84

document.getElementById('container').addEventListener('copy',beforecopy,false );

在Chrome / Safari中，当复制页面上的内容时，以上将运行“ beforecopy”功能。MSIE应该也支持此功能，但是由于某些原因，我收到此错误：

“对象不支持此属性或方法”

现在，据我了解，Internet Explorer不会与主体节点一起使用，但是我本来认为按ID提供节点会很好。有人对我在做什么错有任何想法吗？提前致谢。

**任何可以告诉我第3个参数“ False”有什么用的人的奖励积分。

javascript internet-explorer addeventlistener

— Matrym
source

下面是解释了捕获阶段和良好的文章useCapture非常好：coding.smashingmagazine.com/2013/11/12/...

— feeela

185

在IE中，您必须使用attachEvent而不是标准addEventListener。

一种常见的做法是检查该addEventListener方法是否可用并使用它，否则使用attachEvent：

if (el.addEventListener){
  el.addEventListener('click', modifyText, false); 
} else if (el.attachEvent){
  el.attachEvent('onclick', modifyText);
}

您可以创建一个函数来做到这一点：

function bindEvent(el, eventName, eventHandler) {
  if (el.addEventListener){
    el.addEventListener(eventName, eventHandler, false); 
  } else if (el.attachEvent){
    el.attachEvent('on'+eventName, eventHandler);
  }
}
// ...
bindEvent(document.getElementById('myElement'), 'click', function () {
  alert('element clicked');
});

您可以在此处运行上述代码的示例。

第三个论点addEventListener是useCapture；如果为true，则表示用户希望启动事件捕获。

— 克里斯蒂安·C·萨尔瓦多
source

1

感谢您的回复。我只是尝试了您发布的内容，并且有效。现在让我失望的是，“复制”事件不起作用，而“ onclick”事件却起作用。具体来说，这很奇怪，因为quirksmode指出它应该可以工作： quirksmode.org/dom/events/cutcopypaste.html有什么想法吗？

— Matrym，2009年

划掉该评论。我只是隔离并尝试了您发送的内容，然后更改单击复制即可。再次感谢。

— Matrym，2009年

1

为何Microsoft自己的文档显示使用addEventListenerthen？msdn.microsoft.com/en-us/library/ie/cc197015(v=vs.85).aspx

— wmarbut 2013年

我相信@wmarbut addEventListener已添加到IE9中。在的attachEvent IE 11中除去原来的问题是从2009年开始CMS已经提供了继续即使IE 11一起工作的正确，可靠的方法

— 科林·杨

这就解释了为什么它对我来说可以在Internet上运行，而不能在Intranet上运行，因为我已将Intranet站点的设置设置为兼容模式。

— 罗杰·帕金斯

32

如果您使用的是JQuery 2.x，请在

<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge;" />
   </head>
   <body>
    ...
   </body>
</html>

这对我有用。

— 阿里夫
source

3

对于运行IE版本<= 8的用户，这将无法解决问题。

— ninjaneer 2014年

5

尝试添加

<meta http-equiv="X-UA-Compatible" content="IE=edge">

在打开头标签之后

— 130nk3r5
source

2

对于运行IE版本<= 8的用户，这将无法解决问题。

— ninjaneer 2014年

5

Internet Explorer（IE8及更低版本）不支持addEventListener(...)。使用该attachEvent方法，它具有自己的事件模型。您可以使用以下代码：

var element = document.getElementById('container');
if (document.addEventListener){
    element .addEventListener('copy', beforeCopy, false); 
} else if (el.attachEvent){
    element .attachEvent('oncopy', beforeCopy);
}

尽管我建议避免编写自己的事件处理包装器，而改用JavaScript框架（例如jQuery，Dojo，MooTools，YUI，Prototype等），并且避免自己创建修复程序。

顺便说一下，事件的W3C模型中的第三个参数与冒泡事件和捕获事件之间的区别有关。在几乎每种情况下，您都希望在事件冒泡时进行处理，而不是在捕获事件时进行处理。当对诸如“焦点”事件之类的文本框使用事件委派时，它很有用，不会冒泡。

— 丹·赫伯特
source

2

从IE11开始，您需要使用addEventListener。attachEvent不推荐使用，并引发错误。

— 威尔·华因
source

0

正如PPK在这里指出的那样，在IE中，您也可以使用

e.cancelBubble = true;

— magikMaker
source

0

使用<meta http-equiv="X-UA-Compatible" content="IE=9">IE9 +可以addEventListener通过删除事件名称中的“ on”来实现支持，如下所示：

 var btn1 = document.getElementById('btn1');
 btn1.addEventListener('mousedown', function() {
   console.log('mousedown');
 });

— 妖怪
source

0

问题是IE没有标准addEventListener方法。IE使用自己的功能attachEvent，几乎相同。

可以在quirksmode找到有关差异以及有关第三个参数的详细说明。

— 贾尼·哈蒂卡宁
source