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

Question

没有 Polymer 是如何工作的

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

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

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

这工作正常，可以在 this JSFiddle demo 中看到.

尝试在 Polymer 中做同样的事情

但是 Polymer 有不同的语法，它使用 on-click 而不是 onclick:

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

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

我想在每次按下键时在我的 input 元素上手动调用 on-click 事件。为此，我使用了一个 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 的事件绑定(bind)，sender 是事件发生的元素(在本例中是我的 input 元素)。不幸的是，这给了我以下输出:

Keypress event triggered
Uncaught TypeError: object is not a function

错误的发生是因为 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