2

Как можно проверить поддержку браузером, открывшего сайт, возможности работы с определенным стандартным событием, например, transitionend, focusin или даже beforecopy, ведь однозначно они поддерживаются не всеми браузерами и хотелось бы узнать вовремя, что они корректно обработаются.

Особенно интересует, как узнать, поддерживает ли браузер событие transitionend, это событие берёт свои истоки из CSS, поэтому с ним надо видимо работать как-то по-другому. Можно ли сказать так: если у него есть свойство transition, то у него есть событие и transitionend?

1 ответ 1

3

Существует специальная библиотека для проверки всего-всего. Там это делают вот так:

  1. берется имя события;
  2. конкатенируют 'on' и имя этого события;
  3. проверяем наличие свойства с получившимся именем у элемента, например div'а, с помощью оператора in. Если такое свойство есть, тогда событие может обрабатываться;
  4. для странных браузеров, для уверенности, берут этот элемент и добавляют к нему пустой атрибут с именем, получившимся в результате конкатенации. Если у этого DOM-объекта появилось свойство с таким именем, которое является функцией, тогда событие может обрабатываться (думаю этот пункт можно смело опускать).

Пример такой функции:

function hasEvent(event, elem) {
    var event = 'on' + event;
    var elem = document.createElement(elem || 'div');

    var has = event in elem;
    if (!has) {
        elem.setAttribute(event, '');
        has = typeof elem[event] == 'function';
    }

    return has; 
}

Или, немного ее сократив, вот так:

function hasEvent(event, elem) {
    return ('on' + event) in document.createElement(elem || 'div');
}

Пример работы:

hasEvent('click');  // true
hasEvent('azaza');  // false

Соответственно, второй аргумент существует для того, чтобы можно было проверить специфичные для некоторых DOM-объектов свойства.

Всё было бы здорово, но такой метод работает некорректно, например, на transitionend он всегда говорит false.

Похоже единственный способ узнать, есть ли какой transitionend в браузере, асинхронный, увы, что не очень удобно и состоит в том, чтобы просто инициализировать событие, в котором изменить некий флаг, то есть вот так:

var hasTransition = false;
function getHasTransition() {
    var div = document.createElement('div');
    div.style.visibility = 'hidden';
    div.style.transition = 'transform 1ms ease';

    document.body.appendChild(div);

    div.addEventListener('transitionend', function() {
        hasTransition = true;
        alert('yes');
        document.body.removeChild(div);
    });

    setTimeout(function() { div.style.transform = 'translateX(1px)'; }, 20);
}

Какое-то некрасивое решение, однако, другие не приходят в голову. Модифицировать его на проверку всяких префиксов не представляет труда. Узнавать поддержку браузером transitionend асинхронно не хорошо. Видимо лучше просто положиться на проверку наличия свойства elem.style.transition (и прочих) и считать, что события есть автоматом.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.