Форум

nastya97core · #1 (**permalink**) 09.04.2020, 13:43

Здравствуйте. Вот такое я сделала:

var startX = 0;
var mouse;

$('.container').on('touchstart mousedown', function (e) {
  mouse = "down";
  console.log("коснулись");
  startX = e.clientX;
  console.log(startX);


  if (mouse == "down") {
  $('.container').on('touchmove mousemove', function (e) {
    console.log("при движении",e.clientX)
  })
  } else {
    console.log("не нажато")
  }


  $('.container').on('touchend mouseup', function (e) {
    console.log("отпустили");
    mouse = "up";
    return;
  })
})

Я думала остановить return'ом функцию, но я останавливаю только touchend, а мне нужно остановить всю функцию, потому что даже когда я отпускаю мышь - у меня всё равно в логах пишет положение мыши. Подскажите, как правильно организовать это?
К чему я стремилась:
мне нужно, чтобы при нажатии на экран я получала текущее положение мыши и при перемещении с зажатой клавишей я получала новые значения. Потом я буду просто считать: на какое расстояние пользователь перетащил. Как только пользователь отпускает: функция останавливается.

рони · #2 (**permalink**) 09.04.2020, 14:32

nastya97core,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .container {
      height: 300px;
      width: 500px;
      border: 1px solid #FF0000
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    var startX = 0;
    var endX = 0;
    var mouse;
    var txt = '';
    $('.container').on('touchstart mousedown', function(e) {
        mouse = "down";
        startX = e.clientX;
        $('p').html(txt += '<br>коснулись  ' + startX + '<br>');

        function move(e) {
            $('p').html(txt += ", при движении " + e.clientX);
        }
        function end(e)
        {
          $(document).off('touchmove mousemove', move);
          endX = e.clientX;
          $('p').html(txt += "<br>отпустили " + endX);
          mouse = "up";
        }

        $(document).on('touchmove mousemove', move)
        $(document).one('touchend mouseup', end)
    })
});
  </script>
</head>
<body>

<div  class="container"></div>
<p></p>
</body>
</html>

nastya97core · #3 (**permalink**) 09.04.2020, 14:36

Rise,
я не нашла там ничего для себя. Мне нужно лишь останавливать mousemove, когда мышка отпускается

voraa · #4 (**permalink**) 09.04.2020, 14:43

События touch обрабатываются совсем по другому, чем mouse.
У touchEvent нет собственных свойств типа clientX и подобных ему.
Вместо этого там есть массивы точек касания (ведь может быть много точек касания пальцами)
event.touches - массив всех точек касания экрана в данный момент
event.changedTouches - массив точек, которые изменились со времени предыдущего события
event.targetTouches - массив точек, для которых касание было на текущем элементе
А уже каждая из точек имеет свойства .screenX, .screenY, .clientX, .clientY...
Кроме того, каждая точка имеет числовой идентификатор .identifier , по которому ее можно отыскать в этих массивах

Еще отличие в том, что события touchmove и touchend всегда посылаются тому элементу, на котором было touchstart, даже если точка уже ушла с этого элемента.

nastya97core · #5 (**permalink**) 09.04.2020, 15:16

рони,
Спасибо! Не знала про .off

voraa,
и вам спасибо. сейчас поняла, какую ошибку сделала. не подумала, что у тача иначе ловится позиция. но мне в любом случае нужно ловить только один палец.

Сейчас смотрю и понимаю, что лучше отдельно сделать touch и отдельно mouse. Сейчас разбираюсь с пальцем, а он мне ошибку возвращает при отпускании

var startX = 0;
    var endX = 0;
    var mouse;
    $('.container').on('touchstart', function(e) {
        mouse = "down";
        startX = e.targetTouches[0].clientX;
        console.log("Коснулись",startX)

        function move(e) {
            console.log("Движение",e.targetTouches[0].clientX)
        }
        function end(e) {
          $(document).off('touchmove', move);
          endX = e.targetTouches[0].clientX;
          console.log("отпустили",endX) // это 80-я строка
          mouse = "up";
        }

        $(document).on('touchmove', move)
        $(document).one('touchend', end)
    })

Код:

Uncaught TypeError: Cannot read property 'clientX' of undefined
    at HTMLDocument.end ((index):80)

voraa · #6 (**permalink**) 09.04.2020, 15:18

PointerEvents, конечно очень хорошая штука.
Но за одним исключением - кривоватенькая реализация в Файрфоксе на десктопе (для одной точки преодолимо, для двух и более точек мне не удалось уговорить Файрфокс работать). Полное отсутствие в мобильном Файрфоксе.

voraa · #7 (**permalink**) 09.04.2020, 15:24

Сообщение от nastya97core

Код:

Uncaught TypeError: Cannot read property 'clientX' of undefined
    at HTMLDocument.end ((index):80)

Так палец то уже убрали с экрана. Вот и нет ее в e.targetTouches[0]
Да и не нужна она. Потому, что сначала уже было обработано touchmove. А при убирание пальца позиция не изменяется.

nastya97core · #8 (**permalink**) 09.04.2020, 15:28

voraa,
да, разобралась уже))) спасибо!

а вот по поводу разделять код для мышки и для пальца я всё думаю... Можно ли сделать так, чтобы они не конфликтовали, потому что event один, а устройства (мышь и палец) у меня 2?

voraa · #9 (**permalink**) 09.04.2020, 15:38

Что бы совсем не было конфликтов, надо использовать pointerEvents. Для одной точки касания нормально будут работать и в Файрфоксе (десктоп)
Но есть один конфликт между mouse и touch, который трудно преодолеть.
Когда указатель уходит с элемента, к которому прицеплены обработчики событий, события mousеmove, mouseup перестают ему поступать. А все события touch продолжают идти тому элементу, с которого началось касание.

nastya97core · #10 (**permalink**) 09.04.2020, 17:56

Rise,
voraa,
простите, я немного туплю. вы говорите про css свойство pointerEvents?

Форум

Справочник

Discord чат

Курсы javascript