Question

我在使用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社区，看看是否有人有任何想法。

提前致谢！

-----------后续------------

感谢那些写进去的人。到目前为止，没有运气让它工作，但我已经创建了一个简单的复制品来说明这个问题。这是我的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：19 Foo成功解雇了。

Firefox结果（button.fire）：单击按钮：[对象HTMLElement] 解雇自定义事件foo 火灾事件失败。 TypeError：button.fire不是函数

Firefox结果（button.dispatchEvent）：单击按钮：[对象HTMLElement] 解雇自定义事件foo 火灾事件失败。 TypeError：EventTarget.dispatchEvent的参数1未实现接口Event。

Answer 1

使用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>

Answer 2

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

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

Answer 3

我建议您使用button.fire(event)为您解决当前问题。

从长远来看，使用最新版本的Polymer尝试使用代码，如果dispatchEvent在那里引发异常，我建议使用简单的jsbin再现在paper-button github项目上提交问题。

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

3 个答案: