Question

我在使用我的JavaScript代码创建的聚合物纸张按钮时出现问题，并在我的HTML中分配了div。我已经谷歌搜索了一段时间，但我空手而归。我很简单，希望能够点击它时做一些事情，但我无法弄清楚如何将它的点击属性分配给一个函数。

提前致谢。

(function(document) {
  'use strict';

  var app = document.querySelector('#app');
  window.addEventListener('WebComponentsReady', function() {

    var mainCollapse = document.getElementById('collapse');

    /*--------------Contact Details Collapseable--------------*/
    var contactDetailsDiv = document.getElementById('contactDetails');
    var gitBtn = document.createElement('paper-button');
    gitBtn.textContent = 'GitHub Profile.';
    gitBtn.raised = true;
    gitBtn.id = 'gitButton';
    gitBtn.link = 'https://github.com/SKHolmes';
    gitBtn.onClick = function(){
      console.log('here');    }

    var githubDiv = document.getElementById('githubDiv');
    githubDiv.appendChild(gitBtn);   

    app.displayContactDetails = function(){
      var contactDetails = contactDetailsDiv.innerHTML;
      mainCollapse.innerHTML = contactDetails;
    }

    //Button Listeners
    document.getElementById("contact-button").addEventListener("click", function(){
      app.displayContactDetails();    
      mainCollapse.toggle();      
    });

    document.getElementById('gitButton').addEventListener('click', function(){
      console.log('here');
    });
  });  
})(document);

好吧现在变得有点荒谬了我已经尝试了几乎所有东西来让这个按钮在控制台上打印一些东西。包括所有这些。

app.listen(gitBtn, 'tap', 'test');

app.listen(gitBtn, 'click', 'test');

gitBtn.addEventListener('tap', function(){
  alert('here');
});

gitBtn.onclick = 'test';

gitBtn.click = function(){ console.log('here'); }   

app.test = function(){
  console.log('here');
}
gitBtn.setAttribute('on-click', 'app.test');

Answer 1

Polymer docs描述了如何强制添加事件监听器：

使用自动节点查找和便捷方法listen和 unlisten。
this.listen(this.$.myButton, 'tap', 'onTap');

this.unlisten(this.$.myButton, 'tap', 'onTap');
调用侦听器回调，并将this设置为元素实例。

如果您必须添加侦听器，则需要将其删除   势在必行。这通常在attached和detached中完成   回调。如果使用侦听器对象或带注释的事件   在侦听器中，Polymer会自动添加和删除事件侦听器。

因此，您可以像这样绑定onClick函数：

gitBtn.attached = function() {
  this.listen(this, 'tap', 'onClick');
};
gitBtn.detached = function() {
  this.unlisten(this, 'tap', 'onClick');
};

jsbin

(function(document) {
  'use strict';

  window.addEventListener('WebComponentsReady', function() {

    var gitBtn = document.createElement('paper-button');
    gitBtn.textContent = 'GitHub Profile.';
    gitBtn.raised = true;
    gitBtn.id = 'gitButton';
    gitBtn.link = 'https://github.com/SKHolmes';
    gitBtn.onClick = function() {
      console.log('gitBtn.onClick()');
      log.innerHTML += 'gitBtn.onClick()<br>';
    };

    gitBtn.attached = function() {
      this.listen(this, 'tap', 'onClick');
    };
    gitBtn.detached = function() {
      this.unlisten(this, 'tap', 'onClick');
    };

    var githubDiv = document.getElementById('githubDiv');
    githubDiv.appendChild(gitBtn);

  });

})(document);

<!DOCTYPE html>
<html>

<head>
  <base href="https://polygit.org/polymer+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="paper-button/paper-button.html">
</head>

<body>
  <div id="githubDiv"></div>
  <div id="log"></div>
</body>

</html>

在未点击的JavaScript点击事件中创建的Polymer Paper-Button

1 个答案: