2017-02-10 3 views
2

У нас есть необходимость в нашей галерее изображений, чтобы предотвратить события Apple при прикосновении к изображениям на экране, но все же разрешить длительное нажатие, которое вызывает выноску «Сохранить изображение» , Мы предоставляем инструкции для пользователей iOS долгое нажатие на изображение, а затем выберите «Сохранить изображение», но пользователи очень смущены, если они случайно нажимают слишком сильно и запускают событие Force Touch, особенно если оно «всплывает» и загружает изображение на новой странице.Предотвратите событие прикосновения к силе на изображении, но все же разрешите длительное событие пресса в iOS Safari

Первоначально я думал о прослушивании событий touchforcechange, а затем звонил preventDefault, когда сила достигла определенного уровня. Что-то вроде этого:

imgEl.addEventListener('touchforcechange', 'onTouchForceChange', false) 

function onTouchForceChange(e){ 
    if(e.changedTouches[0].force > 0.5 ){ 
     e.preventDefault() 
    } 
} 

Однако, похоже, блокирует и продолжительные события. Также не кажется, что это единственный уровень силы, на котором событие переключается на Force Touch.

Добавление свойства css -webkit-touch-callout: none; к изображению блокирует событие Force Touch, но опять же оно также блокирует выноску при длительном нажатии.

Любые идеи очень ценятся!

+0

Похоже, что команда WebKit расследует события для обработки Force Click, что, предположительно, обеспечит достаточный контроль для этого. https://webkit.org/status/#feature-force-click-events –

ответ

0

(с помощью JQuery, но, вероятно, может быть достигнуто без него)

это, кажется, работает для меня, протестирован на iPhone 7 плюс прошивкой 10.3.3:

window.addEventListener('touchforcechange', function(event) { 
     var force = event.changedTouches[0].force; 
     var id = event.changedTouches[0].target.id; 

     if ($('#' + id).hasClass('class') && force > 0.1) { 
      event.preventDefault(); 
      console.log('prevented 3D touch on element with id = ' + id); 
     } 
    }); 

заменить «класс» с класс элементов, на которых следует предотвращать 3D-касание. в вашем случае, вероятно, класс, разделяемый всеми элементами изображения в галарии.

Я думаю, что основная проблема с вашей заключается в том, что 0.5, вероятно, слишком высока для порога.

Смежные вопросы