'' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' 'не "" по умолчанию »», если не проверять обработку мыши и касание »). - PullRequest
Новая
       29

'' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' 'не "" по умолчанию »», если не проверять обработку мыши и касание »).

0 голосов
/ 26 декабря 2018

Предположим, я хочу использовать как сенсорную, так и мышь (мышь и сенсорный экран могут быть доступны).

Существует как минимум один способ решения проблемы.

Когда срабатывает касаниеprotectDefault (первый способ): 

let onMove = event => {
    //either touch, or mouse
};

document.body.addEventListener('touchmove', event=>{
    //prevent mouse if this event fires
    event.preventDefault();
    onMove(event);
}, false);

document.body.addEventListener('mousemove', event=>{
    onMove(event);
}, false);

Что если вместо этого мы сделаем это (второй способ): 

let didTouch = false;

let onMove = event => {
    //either touch, or mouse
};

document.body.addEventListener('touchmove', event=>{
    didTouch = true;
    onMove(event);
}, false);

document.body.addEventListener('mousemove', event=>{
    if(didTouch){
        didTouch = false;
    }else{
        onMove(event);
    }
}, false);

Является ли второй способ жизнеспособным для обработки как прикосновения, так и мыши?Первый способ рекомендуется, но меня интересует возможность использования любого из этих способов, если нет непредвиденных проблем.

Ответы [ 2 ]

0 голосов
/ 19 января 2019

У меня была эта проблема один раз, но с другими событиями, проверьте мое решение: 

let handler = function (e) {
  // do stuff
};

if (isTouchDevice()) {
  key.addEventListener('touchstart', handler);
} else {
  key.addEventListener('mousedown', handler);
}

function isTouchDevice() {
  var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
  var mq = function (query) {
    return window.matchMedia(query).matches;
  };
  if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
    return true;
  }

  // include the 'heartz' as a way to have a non matching MQ to help terminate the join
  // https://git.io/vznFH
  var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
  return mq(query);
}
0 голосов
/ 19 января 2019

По моему мнению, второй подход не является хорошим решением, потому что:

  1. Производительность: вы обрабатываете 2 события (касание и мышь).Первое решение предотвращает запуск события мыши, поэтому ваше приложение делает меньше обработки событий.

  2. Сложность: didTouch добавляет ненужную сложность вашему коду ... как общее правилобольшой палец, если вы можете достичь того же результата, написав меньше кода, предпочтительнее использовать более короткое решение, если только не существует действительного преимущества использования более длинного решения.

Еще одна потенциальная проблема, которую следует сохранитьв виду взаимное исключение. JavaScript - потокобезопасный , и вам не нужно беспокоиться о втором событии, которое вызывает и изменяет ваш флаг didTouch, пока вы еще обрабатываете первое событие.Но имейте в виду, что с асинхронными методами невозможно столкнуться с проблемами мьютекса.

...