Question

我的印象是Firefox是＆＃34;清除＆＃34;自定义元素的data-*属性。

请参阅下面的脚本在Chrome中使用本机Web组件支持，但在Firefox中，似乎一旦我的点击事件处理程序运行，数据集就会为空。

document.addEventListener('DOMContentLoaded', function() {
    var popups = document.querySelectorAll('iron-image[data-popup]');
    for (var i=0; i < popups.length; i++) {
        var img = popups[i];
        console.log(img.dataset.popup);   // <--- this works

        img.addEventListener('click', function(ev) {
            var app = document.querySelector('sh-app');
            app.showPopup(ev.target.dataset.popup);  // <-- This fails, dataset is empty
        });
    }
});

旁注：我也尝试了WebComponentsReady事件，但由于某种原因它根本没有被解雇。

之前是否有人遇到此问题并了解其原因？这是Polymer（在这种情况下为<iron-image>），Web Components polyfill或Firefox的实现中的错误吗？

Answer 1

Event retargeting

基本上，您必须使用Polymer.dom来包装事件以对其进行规范化。

document.addEventListener('DOMContentLoaded', function() {
    var popups = document.querySelectorAll('iron-image[data-popup]');
    for (var i=0; i < popups.length; i++) {
        var img = popups[i];
        console.log(img.dataset.popup);   // <--- this works

        img.addEventListener('click', function(ev) {
            var app = document.querySelector('sh-app');
            var event = Polymer.dom(ev); // you wrap the event using Polymer.dom
            app.showPopup(event.localTarget.dataset.popup);  // instead of target you should use localTarget
       });
   }
});

Firefox

1 个答案: