查看有哪些活动类型

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 会回 "transitionend" 对于更现代的浏览器和供应商前缀的版本，否则？

我希望不使用浏览器类型检测来评估使用什么前缀。

是不是有什么地方可以让我查到支持什么类型？

我知道这在jQuery中很容易实现，但我想避免使用jQuery。

更新

我曾试着用 办法:

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浏览器上都能使用 还没有测试其他浏览器。