Программно отпустить мобильный кран в Javascript - PullRequest
Новая
       3

Программно отпустить мобильный кран в Javascript

0 голосов
/ 18 июня 2020

У меня есть набор div, которые становятся темнее при нажатии / наведении курсора. Также может выполняться дополнительный код на mouseenter и mouseout. В мобильном телефоне я бы хотел, чтобы они отпускали касание, когда я изменяю ориентацию своего устройства (для этой демонстрации это resize).

Я тестирую, используя Chrome DevTools -> Переключить панель инструментов устройства (Ctrl + Shift + M) для имитации нажатия. 

$('div').on('mouseenter', event => 
    $(event.target).addClass('active-state')
    //other code could be executed here
);

$('div').on('mouseout', event => 
    $(event.target).removeClass('active-state')
    //other code could be executed here
);

// emulate orientationchange using resize because I don't know how to emulate orientation change with chrome devtools
$(window).on('resize', _ => {
    console.log('resize');
    $('.active-state').trigger('mouseout');
    $('#header').focus();
});

Я мог бы избавиться от визуальных функций, удалив класс "active-state" или вызвав $('#targetDiv').trigger('mouseout');, но если я снова нажму на тот же div, событие mouseenter больше не сработает.

Я предполагаю, что управление отводом не обнаруживает изменения цели касания, поэтому mouseenter больше не срабатывает. Мне пришлось бы нажать из div и снова нажать, чтобы получить mouseenter, чтобы снова выстрелить.

Есть ли способ заставить управление касанием программно освободить свою цель? Я также пробовал использовать $('#header').focus(), чтобы переключить фокус на что-то другое, но, похоже, это не отпускает кран.

GIF-демонстрация проблемы на CodePen

Вот мой пример кода:

https://codepen.io/DatKami/pen/wvMoVjy

...