Как правильно ловить нажатие и перемещение мыши?
Здравствуйте. Вот такое я сделала:
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, а мне нужно остановить всю функцию, потому что даже когда я отпускаю мышь - у меня всё равно в логах пишет положение мыши. Подскажите, как правильно организовать это? К чему я стремилась: мне нужно, чтобы при нажатии на экран я получала текущее положение мыши и при перемещении с зажатой клавишей я получала новые значения. Потом я буду просто считать: на какое расстояние пользователь перетащил. Как только пользователь отпускает: функция останавливается. |
Здесь swipe что-то похожее, посмотри там Ctrl+U.
|
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> |
Rise,
я не нашла там ничего для себя. Мне нужно лишь останавливать mousemove, когда мышка отпускается |
События touch обрабатываются совсем по другому, чем mouse.
У touchEvent нет собственных свойств типа clientX и подобных ему. Вместо этого там есть массивы точек касания (ведь может быть много точек касания пальцами) event.touches - массив всех точек касания экрана в данный момент event.changedTouches - массив точек, которые изменились со времени предыдущего события event.targetTouches - массив точек, для которых касание было на текущем элементе А уже каждая из точек имеет свойства .screenX, .screenY, .clientX, .clientY... Кроме того, каждая точка имеет числовой идентификатор .identifier , по которому ее можно отыскать в этих массивах Еще отличие в том, что события touchmove и touchend всегда посылаются тому элементу, на котором было touchstart, даже если точка уже ушла с этого элемента. |
nastya97core,
Там самое простое решение того к чему ты стремишься - "на какое расстояние пользователь перетащил" mouse или touch. Там deltaX и deltaY это то самое расстояние, на которое перетащили pointer, который на самом деле и подразумевает те самые mouse и touch. Плюс бонус в виде thresholdTime и thresholdDistance. |
рони,
Спасибо! Не знала про .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 |
PointerEvents, конечно очень хорошая штука.
Но за одним исключением - кривоватенькая реализация в Файрфоксе на десктопе (для одной точки преодолимо, для двух и более точек мне не удалось уговорить Файрфокс работать). Полное отсутствие в мобильном Файрфоксе. |
Цитата:
Да и не нужна она. Потому, что сначала уже было обработано touchmove. А при убирание пальца позиция не изменяется. |
voraa,
да, разобралась уже))) спасибо! а вот по поводу разделять код для мышки и для пальца я всё думаю... Можно ли сделать так, чтобы они не конфликтовали, потому что event один, а устройства (мышь и палец) у меня 2? |
Часовой пояс GMT +3, время: 03:16. |