Интерактивность и прикосновение к Firefox на устройствах Microsoft Surface?

На сенсорных устройствах Microsoft (таких как Surface Pro) в Chrome и IE можно зафиксировать события mouse/pointer/touch и в этом случае предотвратить прокрутку страницы. p >

В Firefox, получение одинакового уровня активности при остановке страницы от прокрутки прикосновением кажется невозможным. Вы можете остановить прокрутку страницы, не допуская "колесо":

can.addEventListener('wheel', function(e) {
  console.log('stopping wheel')
  e.preventDefault();
}, false);

Но Firefox, похоже, не выделяет события mouse/pointer/touch, которые вы можете прослушивать, поэтому вы не можете выполнять те же действия.

Здесь есть живой пример:

https://codepen.io/simonsarris/pen/PJwMay

Прикосновение к поверхности: Вы можете рисовать на холсте в Chrome и IE, но вы не можете рисовать его в Firefox. Если вы прокомментируете слушателя "колесо", Firefox дополнительно прокрутит страницу.

Итак, вопрос: Что необходимо для того, чтобы получить интерактивность HTML Element в Firefox, наравне с другими браузерами в системе?

Ответы

Ответ 1

Рассмотрите возможность использования События касания. И поддерживается в браузерах (Firefox, Chrome, Edge).

Решение прост, обработайте Touch Events и предотвратите значения по умолчанию.

Рассмотрим этот пример -

function startup() {
  var el = document.getElementsByTagName("canvas")[0];
  el.addEventListener("touchstart", handleStart, false);
  el.addEventListener("touchend", handleEnd, false);
  el.addEventListener("touchcancel", handleCancel, false);
  el.addEventListener("touchmove", handleMove, false);
  log("initialized.");
}

element.addEventListener('touchstart', function(e){
    var touchobj = e.changedTouches[0] // reference first touch point (ie: first finger)
    startx = parseInt(touchobj.clientX) // get x position of touch point relative to left edge of browser
    statusdiv.innerHTML = 'Status: touchstart<br> ClientX: ' + startx + 'px'
    e.preventDefault()
}, false)

Источник: MDN - события касания

Простую демонстрацию для сенсорных событий можно найти здесь (mdn) или здесь (jsdfiddle)

Проверьте этот пример, который будет намного более полным (Справка/демонстрация) -

<div class="box" id="box1">
<h3> Touch Me! </h3>
</div>

<h3 id="statusdiv">Status</h3>

<script>

window.addEventListener('load', function(){

    var box1 = document.getElementById('box1')
    var statusdiv = document.getElementById('statusdiv')
    var startx = 0
    var dist = 0

    box1.addEventListener('touchstart', function(e){
        var touchobj = e.changedTouches[0] // reference first touch point (ie: first finger)
        startx = parseInt(touchobj.clientX) // get x position of touch point relative to left edge of browser
        statusdiv.innerHTML = 'Status: touchstart<br> ClientX: ' + startx + 'px'
        e.preventDefault()
    }, false)

    box1.addEventListener('touchmove', function(e){
        var touchobj = e.changedTouches[0] // reference first touch point for this event
        var dist = parseInt(touchobj.clientX) - startx
        statusdiv.innerHTML = 'Status: touchmove<br> Horizontal distance traveled: ' + dist + 'px'
        e.preventDefault()
    }, false)

    box1.addEventListener('touchend', function(e){
        var touchobj = e.changedTouches[0] // reference first touch point for this event
        statusdiv.innerHTML = 'Status: touchend<br> Resting x coordinate: ' + touchobj.clientX + 'px'
        e.preventDefault()
    }, false)

}, false)

</script>

Литература:

  • События MDN Touch здесь
  • Использование сенсорных событий здесь
  • Введение в события Touch + Прокрутка + Перетаскивание здесь
  • Обнаружение прокрутки с помощью touch здесь
  • Развернуть галерею изображений здесь
  • Online Paint демонстрация | code Это хорошо!
  • Подробней касания событий здесь

Надеюсь, что это поможет.