2011-02-07 4 views
65

Я разрабатываю приложение для iPad для iPad. Таким образом, он использует события касания и анимацию webkit-CSS.Моделирование событий касания на ПК-браузере

До сих пор я использовал хром в качестве среды отладки из-за этого удивительного режима разработчика.

Что бы я хотел, это отлаживать мой HTML/JavaScript с помощью отладчика Google-Chrome на моем ПК во время моделирования сенсорных событий с помощью мыши.

На моем сайте нет событий с несколькими касаниями и никаких событий мыши (без мыши на iPad).

Мне не интересно видеть расположение приложений, но больше в отладке его поведения.

Есть ли какой-нибудь плагин, чтобы получать события мыши в событиях касания в браузере рабочего стола?

+1

Там не заменит для отладки вашего сайта на реальном устройстве (особенно если вы решите поддерживать мультитач). К счастью, отладка в Chrome mobile [очень проста] (https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging?hl=ru) теперь, вы можете отлаживать удаленно через ваш компьютер. Вы также можете подключиться к ADB через Wi-Fi, не требуется USB-кабель. – rustyx

ответ

94

По состоянию на 13 апреля 2012

В разработчике Google Chrome и канарейка строят теперь есть флажок для «Эмуляции прикосновения события "

Вы можете найти его, открыв e F12 и нажмите на шестерню в правом нижнем углу экрана.

on Chrome v22 Mac OS X

На данный момент (Chrome ver.36.0.1985.125) вы можете найти здесь: F12 => Esc => Emulation. console

+0

no checkbox для меня. хром 18,0 osx лев. нажал на маленькую шестерню, но для этого нет флажка! – codepushr

+1

* Эмуляция событий касания * находится в Chrome 19 и выше. –

+15

Что означает «эмулировать события касания»? –

0

Если вы ориентируетесь на Webkit (iPad и все), вы можете положиться на обычный код обработчика событий (add/removeEventListener). Имея это в виду, вам, вероятно, нужно просто развернуть несколько событий - например, «ontouchstart» становится «onclick» на основе среды.

Оффлайн Я не знаю ни одного из библиотек, обеспечивающих этот уровень ветвления. Довольно легко сделать сам.

+0

Спасибо, это то, что я делаю сейчас. Но ..., мой код имеет отношение к написанию пользовательских элементов управления, что означает, что каждый элемент управления имеет свое уникальное поведение при касании. Поэтому я ищу фрагмент javas-cript, который может сделать это один раз на уровне документа (при сохранении независимого OnTouch для каждого другого элемента документа.). Или, возможно, плагин для браузера. Это похоже на достаточно общее требование (отладка мобильных веб-сайтов из браузера рабочего стола ...) – eshalev

2

Мы используем этот скрипт: http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ Это позволит всем событиям мыши в вашем приложении запускаться событиями касания. Итак, поскольку у нас уже есть веб-приложение, которое использовало щелчок правой кнопкой мыши, drag-n-drop и т. Д., Это позволяло нам выполнять все те же функциональные возможности с прикосновением.

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

7

Настольный браузер может имитировать события касания, импортируя дополнительный JS + CSS. Взгляните:

  1. addTouch
  2. Phantom Limb
+1

Еще один вариант: http://mwbrooks.github.com/thumbs.js/ –

+0

@weird ... thumbs.js представляет которые не имеют ни одного из сенсорных полей, которые я ожидал бы (например, «касания»)! – Michael

1

Я столкнулся с этой небольшой библиотекой, основанной на JQ UI lib.Довольно изящная:

http://touchpunch.furf.com/

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