使用Polymer和Firefox使用dispatchEvent时出现问题

Trouble using dispatchEvent using Polymer and Firefox

本文关键字：使用 问题 dispatchEvent Polymer Firefox      更新时间：2023-09-26

我在使用Polymer的web应用程序中使用javascript函数dispatchEvent时遇到了问题。我的代码在Chrome中运行良好，但在Firefox（v31和v33）中，我收到以下错误：

TypeError: Argument 1 of EventTarget.dispatchEvent does not implement interface Event.

以下是生成错误的代码：

button.dispatchEvent(new CustomEvent('chosen', {'detail': value}));

或者，我也尝试过：

var event = new Event('chosen');
event.detail = value;
button.dispatchEvent(event);

结果是一样的：这段代码在Chrome中运行良好，但当它到达dispatchEvent时，它停止了执行，并显示了相同的错误消息。

我非常确信这段代码应该能在Firefox中运行（请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events)，事实上，同样的代码在Firefox中的非聚合物场景中也能很好地工作。（换句话说，如果我尝试在没有任何聚合物导入/脚本的情况下以任何一种方式创建和调度事件，它都可以正常工作。）

我的最佳猜测是，Polymer框架（platform.js或Polymer.js）中的某些内容覆盖了一些围绕事件的内置程序。（我使用的是0.3.4版本。）

我试过广泛搜索，但没能找到有同样问题的人。我确实发现一些人有同样的错误消息，但他们使用其他软件（例如Selenium）进行报告。

Polymer确实提供了一种"fire"方法，它是传统事件调度的包装器，所以我将研究使用它。然而，我想我会联系StackOverflow社区，看看是否有人有任何想法。

提前感谢！

-----------跟进--------------

感谢那些来信的人。到目前为止，它还没有发挥作用，但我已经制作了一个简单的repro来说明这个问题。这是我的html文件的代码。

<!DOCTYPE html>
<html>
  <head>
    <script src="http://www.polymer-project.org/components/platform/platform.js"></script>
    <link rel="import" href="http://www.polymer-project.org/components/font-roboto/roboto.html"/>
    <link rel="import" href="http://www.polymer-project.org/components/paper-button/paper-button.html"/>
    <style>
      body {
        font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
        text-align: left;
      }
    </style>
    <script type="text/javascript">
      function buttonClicked(button)
      {
        alert("Button clicked: " + button);
        alert("Firing custom event foo");
        try {
          // button.dispatchEvent(new CustomEvent('foo'));
          button.fire('foo');
          alert("Foo fired successfully.");
        } catch (err) {
          alert("Fire event failed.");
          alert(err);
        }        
      }
    </script>
  </head>
  <body>
    <paper-button onclick="buttonClicked(this);">Click</paper-button>
  </body>
</html>

不管我使用的是button.fire还是button.dispatchEvent，代码在chrome中成功，在firefox中失败。

Chrome结果（任一代码行）：点击按钮：[object HTMLElement]try_Button_event.html:18正在启动自定义事件foo try_button_event.html:19Foo成功开火。

Firefox结果（button.fire）：点击按钮：[object HTMLElement]正在启动自定义事件foo火灾事件失败。类型错误：button.fire不是的功能

Firefox结果（button.dispatchEvent）：点击按钮：[object HTMLElement]正在启动自定义事件foo火灾事件失败。TypeError:EventTarget.dispatchEvent的参数1未实现接口Event。

通过使用onclick，您阻止了ShadowDOM polyfill管理您的按钮。

您可以通过在点击方法中包装button引用来修复它，比如

  function buttonClicked(button)
  {
    button = wrap(button);

但是，作为一般规则，您最好避免使用内联事件处理程序。这是你的例子的一个mod：

<!DOCTYPE html>
<html>
  <head>
    <script src="http://www.polymer-project.org/components/platform/platform.js"></script>
    <link rel="import" href="http://www.polymer-project.org/components/font-roboto/roboto.html"/>
    <link rel="import" href="http://www.polymer-project.org/components/paper-button/paper-button.html"/>
    <style>
      body {
        font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
        text-align: left;
      }
    </style>
  </head>
  <body>
    <paper-button>Click</paper-button>
    <script type="text/javascript">
      document.querySelector('paper-button').addEventListener('click', buttonClicked);
      function buttonClicked()
      {
        alert("Button clicked: " + this);
        alert("Firing custom event foo");
        try {
          // button.dispatchEvent(new CustomEvent('foo'));
          this.fire('foo');
          alert("Foo fired successfully.");
        } catch (err) {
          alert("Fire event failed.");
          alert(err);
        }        
      }
    </script>
  </body>
</html>

您可以尝试从窗口而不是对象中调度事件。http://jsfiddle.net/95budad2/

window.dispatchEvent(new CustomEvent('chosen', {'detail': 'test'}));

我建议您使用button.fire(event)来解决眼前的问题。

从长远来看，请使用最新版本的Polymer尝试您的代码，如果dispatchEvent在那里引发异常，我建议使用简单的jsbin复制在纸按钮github项目中提交一个问题。

相关文章：