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

Question

如果没有Polymer,它如何工作

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

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

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

这很好,这可以在这个JSFiddle演示中看到.

尝试在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事件触发
Uncaught TypeError:object不是函数

发生错误的原因sender.onclick是null,在这个JSFiddle演示*中可以看到(仅限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 演示

如果您指向相同的元素，您还可以调用该函数而不是触发事件

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

这是另一个JSFiddle 演示