Javascript 未触发聚合单击事件_Javascript_Polymer

Javascript 未触发聚合单击事件

javascript polymer

Javascript 未触发聚合单击事件,javascript,polymer,Javascript,Polymer,目前，我正在尝试聚合物的第一步。现在我有一个简单的页面，上面有一个纸按钮，但是我不能为它注册一个点击事件。我尝试使用以下代码： <paper-button raisedButton id="test" class="colored" label="Click" link="http://twitter.com" on-click="{{ goLin

目前，我正在尝试聚合物的第一步。现在我有一个简单的页面，上面有一个纸按钮，但是我不能为它注册一个点击事件。我尝试使用以下代码：

<paper-button raisedButton 
              id="test"
              class="colored" 
              label="Click"
              link="http://twitter.com"
              on-click="{{ goLink }}">
</paper-button>

<script>
        Polymer('#test', {
            goLink: function(e) 
            {
                window.location.href = e.target.getAttribute('link');
            }
       });
</script>


聚合物（“#测试”{
goLink：函数（e）
{
window.location.href=e.target.getAttribute（'link'）；
}
});

单击事件未被激发。代码有什么问题？第二个问题：我应该在我的代码中使用click上的

还是tab上的呢？
你不能简单地用一些任意元素的id调用Polymer（）
函数来定义聚合物成分。您需要选择包含按钮和处理程序代码的，如下所示：
<body unresolved>

  <polymer-element name="link-button">
    <template>
      <paper-button raisedButton id="test" class="colored"
        label="Click" link="http://twitter.com"
        on-click="{{ goLink }}">
      </paper-button>
    </template>
    <script>
      Polymer('link-button', {
        goLink: function(e) {
          window.location.href = e.target.getAttribute('link');
        }
      })
    </script>
  </polymer-element>

  <link-button></link-button>

</body>

但我认为，如果你只关注聚合物的组件消费者方面，你就会错过聚合物（以及一般的网络组件）的许多功能。
我知道这是一条古老的线索，但因为更多的人可以像我一样来到这里，请看下面正确的更新答案，聚合物1.x兼容（Dirk Grappendorf的答案非常正确，但已经过时）:
要创建聚合物元素，请执行以下操作：
<dom-module id="module-name">
  <style>
    Enter your CSS style here
  </style>
  <template>
    <paper-button raisedButton id="test" link="http://twitter.com" on-tap="goLink">Click</paper-button>
  </template>
  <script>
    Polymer({
      is: 'module-name',
      goLink: function(e) {
        window.location.href = e.target.getAttribute('link');
      }
    });
  </script>
</dom-module>


在此处输入您的CSS样式
点击
聚合物({
是：'模块名'，
goLink：函数（e）{
window.location.href=e.target.getAttribute（'link'）；
}
});

要创建自动绑定模板，请执行以下操作：
<template id="bind" is="dom-bind">
  <paper-button raisedButton id="test" link="http://twitter.com" on-tap="goLink">Click</paper-button>
</template>
<script>
  var bind = document.querySelector('#bind');
  bind.goLink = function(e) {
    window.location.href = e.target.getAttribute('link');
  };
</script> 


点击
var bind=document.querySelector（'#bind'）；
bind.goLink=函数（e）{
window.location.href=e.target.getAttribute（'link'）；
};

或使用侦听器：
<paper-button raisedButton id="test" link="http://twitter.com">Click</paper-button>
<script>
  var button = document.getElementById('test');
  button.addEventListener('tap', function(e) {
    window.location.href = e.target.getAttribute('link');
  });
</script>

点击
var button=document.getElementById（'test'）；
按钮。addEventListener（'tap'，函数（e）{
window.location.href=e.target.getAttribute（'link'）；
});

Paper图标按钮和Paper fab的工作方式完全相同
选择什么？如果我要在更多的项目中重用这个按钮，或者在同一个项目的其他部分中重用这个按钮，我会选择创建一个元素；如果我不打算重用此代码，但我的接口有许多事件要处理，则自动绑定（将整个UI封装在一个dom绑定模板中，并使用bind.handlerName语法创建所有必要的处理程序，比创建触发事件的所有UI元素的侦听器更容易，并且为每个事件创建一个侦听器相同的元素触发）. 而thid选项，listeners，仅当我想要的东西无法通过其他选项（如触发自定义事件）或页面中只有1或2个事件要触发时（在这种情况下，代码似乎比其他选项短）。
对于Polymer 2，您可以这样做：
<dom-bind id='top'>
  <template>
   <paper-button raisedButton id="test" link="http://twitter.com" on-tap="goLink">Click</paper-button>
  </template>
</dom-bind>

<script>
  const bind = document.getElementById('top');
  bind.goLink = ()=>{ }
</script>


点击
const bind=document.getElementById（'top'）；
bind.goLink=（）=>{}

您的模板立即被标记，并且所有数据绑定都是相对于dombind元素的
然后，您甚至可以添加双向绑定，例如：
<dom-bind id='top'>
  <template>
   <paper-button raisedButton id="test" link="[[url]]" on-tap="goLink">[[display]]</paper-button>
  </template>
</dom-bind>

<script>
  const bind = document.getElementById('top');
  bind.goLink = ()=>{ }
  bind.url = 'http://twitter.com'
  bind.display = 'Click'
</script>


[[显示]]
const bind=document.getElementById（'top'）；
bind.goLink=（）=>{}
bind.url=http://twitter.com'
bind.display='单击'

看

或者，对于快速而肮脏的解决方案，您可以简单地使用全局事件处理程序（但这不是最好的主意…）
点击
window.goLink=（）=>{}
它与点击时的不起作用好的，谢谢。因此，如果不创建新的模板标签，我就不能使用“默认”按钮并将某些内容绑定到它们？请查看我的更新答案。如果要使用Polymer的数据绑定，则必须使用自定义元素或自动绑定模板，否则Polymer没有机会建立这些绑定。此线程非常旧，但仅用于注册：“单击”和“点击”事件之间确实存在差异。单击事件仅由鼠标单击触发。另一方面，点击事件通过鼠标点击和点击事件（对于触摸屏）触发。因此，我更喜欢总是使用“点击”而不是“点击”事件。
<dom-bind id='top'>
  <template>
   <paper-button raisedButton id="test" link="http://twitter.com" on-tap="goLink">Click</paper-button>
  </template>
</dom-bind>

<script>
  const bind = document.getElementById('top');
  bind.goLink = ()=>{ }
</script>

<dom-bind id='top'>
  <template>
   <paper-button raisedButton id="test" link="[[url]]" on-tap="goLink">[[display]]</paper-button>
  </template>
</dom-bind>

<script>
  const bind = document.getElementById('top');
  bind.goLink = ()=>{ }
  bind.url = 'http://twitter.com'
  bind.display = 'Click'
</script>

<paper-button raisedButton id="test" link="http://twitter.com" onclick="goLink()">Click</paper-button>

<script>
  window.goLink = ()=>{}
</script>