Question

我试图看看聚合物容易做什么，并且很难让看似最简单的事件发生。

<polymer-element name="field" attributes=" type name value">
  <template>
    <label>{{name}}
      <input  type={{type}} name={{name}} value={{value}}>
    </label>
  </template>
  <script>
    Polymer('field', {
      onblur: function () {
        console.log('blurred');
      }
    })
  </script>
</polymer-element>

我已经创建了这个元素并想在模糊上做点什么有人知道我错过了什么或者我应该在文档中找到什么？

Answer 1

name="field"与Polymer('profile-field'不匹配，但我认为这只是某种错字。
blur个事件不会冒泡，因此您的输入模糊不会导致主机元素上发生blur事件。
最好不要覆盖on<event>个函数，最好使用Polymer事件绑定。

我不确定这是否真的是你所追求的，但这是一个听取输入本身模糊的例子。

<polymer-element name="profile-field" attributes="type name value">
  <template>
    <label>{{name}}
      <input on-blur="{{inputBlur}}" type="{{type}}" name="{{name}}" value="{{value}}">
    </label>
  </template>
  <script>
    Polymer('profile-field', {
      inputBlur: function () {
        console.log('input blurred');
      }
    })
  </script>
</polymer-element>

Answer 2

对于我来说，在聚合物1.9.1下，如果处理程序是通过双向绑定定义的，则不会触发 blur 事件。因此，我使用的是 on-blur =“ inputBlur” 定义，而不是 on-blur =“ {{inputBlur}}” 用于 blur 事件。

<paper-input always-float-label
                         label="Some label"
                         required
                         type="number"
                         step="1"
                         min="0"
                         max="4000"
                         value="{{someValueProp}}"        
                         on-blur="inputBlur" 
                         readonly="[[readonly]]"></paper-input>

inputBlur: function () {
     //Some code inside
},

聚合物元素模糊事件

2 个答案: