javascript - 找出可用的事件类型

Question

在 meteor 中，当 css3 转换结束时应该触发以下事件处理程序:

Template.flipper.events({
    "transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd": function (event) {
        console.log(this, event);
    }
});

但是它似乎不接受多种事件类型。

但以下内容在 Google Chrome 上运行良好:

Template.flipper.events({
    "webkitTransitionEnd": function (event) {
        console.log(event);
    }
});

我可以按如下方式分别分配事件:

function transitionEnd(event) {
    console.log(event);
}

Template.flipper.events({
    transitionend: transitionEnd,
    webkitTransitionEnd: transitionEnd,
    oTransitionEnd: transitionEnd,
    MSTransitionEnd: transitionEnd
});

但是现在，在某些支持 transitionend 的浏览器版本上，没有 vender-prefix 事件将触发两次。

我想知道支持哪种偶数类型，这样我就可以做这样的事情:

var flipperEvents = {};

flipperEvents[supportedEvents("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd")] = function (event) {
    console.log(event);
});

Template.flipper.events(flipperEvents);

现在我该如何实现 supportedEvents 函数，它会为更现代的浏览器和带有 vendor 前缀的版本返回 “transitionend”？

我宁愿不使用浏览器类型检测来评估要使用的前缀。

有没有什么地方可以让我查询支持哪些类型？

我知道这可以在 jQuery 中轻松完成，但我正在努力避免使用 jQuery。

更新

我尝试使用 method found here :

var transitions = {
    'MozTransition': 'transitionend',
    'WebkitTransition': 'webkitTransitionEnd',
    'transition': 'transitionEnd',
    'MSTransition': 'msTransitionEnd',
    'OTransition': 'oTransitionEnd'
};


Template.flipper.rendered = function () {
    var flipper = this.find(".flipper"),
        eventMap = {},
        eventType;

    for (type in transitions) {
        if (type in flipper.style) {
            eventType = transitions[type];
            break;
        }
    }

    if (eventType) {
        eventMap[eventType] = function (event) {
            console.log(event);
        };

        console.log(eventMap);

        Template.flipper.events(eventMap);
    }

    transitions = {};
};

但这也行不通。我认为这是因为 Meteor 不允许在渲染模板后进行事件映射。

Answer 1

我无法创建像 supportedEvents 这样通用的函数，但以下实现了目标:

var transitions = {
        'MozTransition': 'transitionend',
        'WebkitTransition': 'webkitTransitionEnd',
        'transition': 'transitionEnd',
        'MSTransition': 'msTransitionEnd',
        'OTransition': 'oTransitionEnd'
    },
    probe = document.createElement("div"),
    eventType;

for (type in transitions) {
    if (type in probe.style) {
        eventType = transitions[type];
        break;
    }
}

if (eventType) {
    var eventMap = {};

    eventMap[eventType] = function (event) {
        console.log(event);
    };

    Template.flipper.events(eventMap);
}

目前可以在 Chrome 和 Mozilla 中使用。尚未测试其他浏览器。