我有一个自定义 Polymer 元素,用于表示复杂的输入类型。input
它在其 Shadow DOM中包含一个实际标签,如下所示:
<polymer-element name="my-input">
<template>
<input type="text" on-blur="{{onBlur}}" on-focus="{{onFocus}}"/>
</template>
<script>
Polymer('my-input', {
onBlur: ...,
onFocus: ...
});
</script>
</polymer-element>
目前,当用户在自定义元素的内部输入和其他区域之间单击时focus
,事件会泄漏给外部侦听器。blur
如果您在此 CodePen中打开开发工具控制台,即使在输入和周围的绿色区域(都在自定义元素内)之间单击时,您也会看到内部和外部焦点和模糊事件发生。
有没有办法在我的自定义元素中捕获focus
和blur
事件,所以我只能在实际聚焦和模糊整个自定义元素时触发它们?