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

如果没有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.');
    }
});

我想在每次按下键时手动调用输入元素上的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的事件绑定,发送者在这里是事件发生的元素(在这种情况下我的输入元素).不幸的是,这给了我以下输出：

Keypress event triggered
Uncaught TypeError: object is not a function

发生错误是因为sender.onclick为null,在this JSFiddle demo *中可以看到(仅限Chrome).

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

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

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

解决方法

触发click事件的正确方法是调用click()而不是onclick(),因此正确的函数将是

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

这是JSFiddle Demo

如果指向同一元素,也可以调用函数而不是触发事件

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

这是另一个JSFiddle Demo

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

解决方法

猜你在找的JavaScript相关文章