Question

没有聚合物

的情况

在JavaScript中，您可以通过简单地调用元素本身的方法来触发事件：

<input id="foo" type="text" onclick="console.log('Click event triggered');" />

var elem = document.getElementById('foo');
elem.onclick();

这可以正常工作，如this JSFiddle demo中所示。

尝试在Polymer

中执行相同的操作然而，

聚合物具有不同的语法，并使用on-click代替onclick：

<input type="text" on-click="{{ clickEvent }}" />

Polymer('my-element', {
    clickEvent: function() {
        console.log('Click event triggered.');
    }
});

每次按下某个键时，我想手动调用on-click元素上的input事件。为此，我使用on-keypress处理程序来激活我的doClick事件：

<input type="text" on-click="{{ clickEvent }}" on-keypress="{{ doClick }}" />

doClick: function(event, detail, sender) {
    console.log('Keypress event triggered.');
    sender.onclick();
}

根据Polymer的事件绑定，sender这里是事件发生的元素（在这种情况下我的input元素）。不幸的是，这给了我以下输出：

Keypress事件触发了未捕获的TypeError：对象不是函数

错误发生是因为sender.onclick为null，在this JSFiddle demo *中可以看到（仅限Chrome）。

如何在Polymer中的元素上触发事件？

* 我从别人的JSFiddle演示中捏了一下Polymer设置。无论出于何种原因，这只适用于Chrome，但此问题并非Chrome本身所特有。

在有人问我为什么在地球上之前我想要在每次按下一个键时触发input元素上的click事件，请注意这只不过是粗略的例子而不是我正在使用的实际代码。这只是我能够证明问题的最短路径。

Answer 1

触发点击事件的正确方法是调用click()而不是onclick()，因此正确的功能将是

doClick: function(event, detail, sender) {
  console.log('Keypress event triggered');
  sender.click();
}

这是JSFiddle Demo

如果指向相同的元素

，也可以调用函数而不是触发事件

Polymer('my-element', {
  clickEvent: function() {
      console.log('Click event triggered');
  },
  doClick: function(event, detail, sender) {
      console.log('Keypress event triggered');
      this.clickEvent();
  }
});

这是另一个JSFiddle Demo

Answer 2

@scottMiles评论摘要：

触发事件的更一般方法是通过dispatchEvent DOM api或名为fire的Polymer元素上的辅助方法。 - 斯科特迈尔斯

如何在Polymer中的元素上触发事件？

没有聚合物

尝试在Polymer

2 个答案: