Jquery ui touch punch не работает

Скрипт jquery.ui.touch.punch.js не позволяет вводить данные на сенсорных устройствах.

Это заняло у меня немного времени, но я понял, что не могу нажимать на свои входы из-за скрипта touch.punch, который я использую для включения функции перетаскивания пользовательского интерфейса jquery на сенсорных устройствах. Кто-нибудь, знакомый с этим сценарием, знает, почему это может быть? Форма фактически находится в дереве родительского объекта. Кто-нибудь знает, как я могу переопределить или принудительно выполнить выбор? Я собираюсь попробовать привязать события, которые заставляют фокус на входе прямо сейчас, но, может быть, у кого-то есть какое-то понимание?

9 ответов

Для любого, кто может столкнуться с подобной ситуацией с помощью очень удобного хака touch.punch, простое принудительное переключение фокуса на событие щелчка будет работать нормально!

Решение Throttlehead сработало для меня. Возможно, проще просто использовать селекторы JQuery, чтобы охватить все поля ввода и текстовые поля:

Я действительно пытался добавить строки, о которых упоминал Данвиллигер, это не помогло мне.

Что сработало для меня, было

Я не совсем уверен, почему другие опубликованные ответы не сработали, но для кого-то еще, если у них есть такая же проблема, попробуйте мое решение :).

Одно из решений — использовать ручку. Добавьте значок внутри и используйте его для перетаскивания. Тогда входы работают нормально.

Ответ Джейкоба сработал с небольшими изменениями — я обнаружил, что использование события click привело к непоследовательному поведению на iPad, ios9 Safari. Иногда я нажимал один раз на поле, и оно фокусировалось, в других случаях мне приходилось нажимать три раза. Изменение click на touchstart решило проблему для меня (я также использовал делегирование событий, поскольку моя форма была добавлена ​​динамически):

Спасибо @Danwilliger и @jeremytripp за решение. Поскольку эта проблема была известна уже много лет и до сих пор не проработана в репозитории Git автора Touch-Punch, я раздвоил ее, добавив решение:

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

Хорошо, вот еще одно решение, если ваш textfield любой HTML-элемент не фокусируется, не прокручивает, не выбирает слова, не перемещает текстовый курсор по тексту и любые другие сценарии могут возникнуть, тогда вы можете переопределить jquery.ui.touch .punch.js скрипт. Я предполагаю, что ваш элемент не является перетаскиваемым, а, вероятно, его дочерним элементом, как в моем случае.

Поместите класс в свой html-элемент, например class=»useDefault» . Затем перейдите в файл сценария и найдите эту часть:

Как вы, наверное, заметили, event.preventDefault(); гарантирует, что jquery.ui.touch.punch.js отменяет поведение браузера по умолчанию. Чтобы предотвратить это для нашего конкретного узла класса, внесите следующие изменения:

Это решение протестировано только с браузерами webkit и выпуском jQuery UI Touch Punch 0.2.2 .

Надеюсь, это быстрое решение поможет, BR

Ребята, два других ответа здесь НЕ сработали для меня, но решение Данвиллигера работает; однако из его ответа неясно, как именно настроить его в файле Touch Punch JS. Вот что нужно делать будущим ищущим ответы. Опять же, это решение Данвиллигера — я просто уточняю.

Измените этот раздел в jquery.ui.touch-punch.js (примерно в строке 30):

JEditable + jQuery UI Sortable + jquery.ui.touch-punch

Я потратил на эту проблему целый день и наконец нашел решение. Решение очень похоже на ответ Кидвона. Однако я использовал jeditable, который динамически создает поля ввода без имен классов. Поэтому я использовал этот условный оператор вместо проверки имени класса:

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

Источник

Почему это демо не работает на мобильном?

Решения следующие:
1) Если вам не нужно перетаскивание блоков просто удаляете из index.html подключение
Scripts/jquery.ui.touch-punch.js. Именно он не дает корректно отработать нажатию на кнопки

2) Если хотите оставить полный функционал,- здесь посложнее:
1. Качайте свежие версии jquery и jquery-ui. Я Использовал версии jquery-1.11.2.js и jquery-ui-1.11.4.min.js соответственно. Брал отсюда: https://cdnjs.com/libraries/
2. Качаете обычную(не минимизированную) версию jQuery UI Touch Punch 0.2.3. Брал отсюда: touchpunch.furf.com
3. В файле Scripts/main.js, после строк

добавляем строку
$(‘#dialog’).parent().css(<'z-index': '99999'>);
Это для того чтобы окошки «Drag Me» не перекрывали диалога изменения цвета

4. В jquery.ui.touch-punch.js ищем 130 строку. Должны увидеть:

Здесь нужно закомментировать проверку. Т.е. получается

Собственно все. Сохраняем,- проверяем.

lanvin07:
Не за что! Обращайтесь.
Про «удивительный и непривычный тон» это о то, что я попробовал подробно описать что нужно сделать?

Да, кстати, вы писали:

Но дело в том, что я испытывала демо на отключенных от интернета устройствах. Ну, чтобы Local Storage проверить в жёстких условиях 🙂

lanvin07:
1. Не совсем. Внутри touch-punch (из-за особенностей эмуляции событий мыши в android) хитрая обработка событий, связанных с touch. Т.е. он путается в ваших действиях. Сначала возникает событие _touchStart
(в обработчике флажок this._touchMoved сбрасывается). Затем срабатывает событие _touchMove(в обработчике поднимается флажок this._touchMoved). Дальше при событии _touchEnd он проверяет состояние этого флажка и если он сброшен генерирует событие click для данного элемента. Ну, а ситуации когда этот флажок сброшен практически никогда, при такой организации не возникнет.

2. Наоборот, чтобы когда вы несколько блоков «Drag me» расставите на странице, а затем захотите для какого-то из них заменить цвет,- диалог со слайдером оказался поверх всех блоков «Drag me».

3. Я то же об этом подумал. Для случая когда, когда эта библиотека используется несколькими html. Т.е. получаем ситуацию, что в вашем или похожем случае эта правка нужна, в остальных,- нет. Совсем не трогать не получится. Можно выкрутиться дополнительным флажком внутри mainjs.
Что-то вроде:

main.js
.
var correctionFlag = true;
$(document).ready(function ()
<
Main.init();
>);
.

jquery.ui.touch-punch.js
.
if ((!this._touchMoved) || (correctionFlag))
<
// Simulate the click event
simulateMouseEvent(event, ‘click’);
>
.

Хочу видоизменить код, чтобы вместо hue в LS загружались данные пары полей из формы, вызываемой вместо Choose Hue по нажатию на change color, и чтобы они в эти поля загружались из LS при загрузке и изменении.

В веб-инспекторе хрома все работает нормально, поэтому попытаюсь включить экстрасенса 🙂

1. Вы не подключили файл jquery.ui.touch-punch.min.js
2. Кнопки находятся за каким-нибудь слоем. В хроме откройте веб-инспектор, включите мобильное отображение, выберите какой-нибудь маленький экран, нажмите на кнопку правой кнопкой мыши и выберите «Просмотреть код». Если в коде сразу отобразится кнопка — все норм, дело не в этом. Если нет, то смотрите, что ее перекрывает.

Желательно, конечно, посмотреть ваш проект

Tatyana Logvinenko: Local Storage это вы так называете скрипт HTML-5-Ellipse-Tours? )) сам Local storage — это браузерная технология. Возможно да, возможно ссылки неправильно работают, как вы вообще это на мобильном смогли посмотреть? Попробуйте еще вставить картинку какую нибудь, посмотрите отображается ли. Я не знаю, как по другому проверить работу линков сайта на мобильном)

Еще лучше попробуйте выложить в интернет и посмотреть на своем устройстве уже в инете. Если некуда, пишите мне в скайп, помогу с этим

Tatyana Logvinenko: не в том дело) Local storage просто сохраняет пользовательские данные, неважно оффлайн или онлайн расположен сайт.
Если все работает хотя бы в одном браузере, уже лучше. Что такое html-viewer не в курсе, так что не скажу. Но если там отображается сайт то и скрипты скорее всего должны работать.

>> кнопки New, Clear работают, кнопки change color, remove — а что значит работают? ползунки не двигаются, но цвет меняется?

Tatyana Logvinenko: если скажете скайп и покажете код, то возможно, смогу помочь =) так все слишком запутано

Слайдер просто берете и меняете на нужный код. Или вам это динамически нужно? о_О

Источник

Touch-punch doesn’t work with jquery-ui-1.10.4 #137

Comments

idagrove commented Jan 20, 2014

Touch-punch doesn’t seem to be working with jquery-ui-1.10.4.custom.min.js
Is there a work-around besides using an older version of jquery?

The text was updated successfully, but these errors were encountered:

fidlerro commented Jan 21, 2014

I am currently using jqeury-ui-1.10.4’s slider and touch-punch successfully.
Tested with latest Chrome, IE 11 on Surface Pro.

Do you have a working example (meaning non working) public?
Robert FIdler
Springfield, Missouri

martinduo commented Jan 29, 2014

I am also using jqeury-ui-1.10.4’s dialog and touch-punch successfully on everything I’ve tested with, except that Chrome 32 on a Win8 touch screen does not respond to touch/tap on the dialog’s close button: selector «.ui-dialog-titlebar-close» (please fix).
Otherwise working successfully with Firefox 26, Chrome 32, IE 11 on Win8 touch screen, and with Chrome, Safari on iOS7.

fidlerro commented Jan 30, 2014

@martinduo I’d like to help you resolve this issue if I can.
I am testing with Surface Pro, Windows 8.1, Chrome (32bit) 32.0.1700.102m and the https://jqueryui.com/dialog/ examples.

I am not experiencing any issues with the jquery dialog box while using Chrome 32bit.

Can you verify that my testing environment is correct and that the examples used are accurately replicating your reported issue.

Thanks,
Robert Fidler
Springfield, Missouri

idagrove commented Jan 30, 2014

Sorry, for the delay.
Here’s the working example, which works on desktop: http://partcours.de/ar-marketing

Here’s the yepnope for this:

This is the touch version of it, where drag/drop doesn’t work and it starts to play before it is supposed to.
http://partcours.de/ar-marketing-touch

With this yepnope:

// loads the external JQuery Ui for dragging and dropping
‘../jquery-ui-1.10.4.custom.min.js’
‘../jquery-2.0.3.min.js’,
‘../jquery.ui.touch-punch.min.js’
],

Am 21.01.2014 um 01:39 schrieb fidlerro notifications@github.com:

I am currently using jqeury-ui-1.10.4’s slider and touch-punch successfully.
Tested with latest Chrome, IE 11 on Surface Pro.

Do you have a working example (meaning non working) public?
Robert FIdler
Springfield, Missouri

—
Reply to this email directly or view it on GitHub.

fidlerro commented Jan 30, 2014

Missing a comma between ‘../jquery-ui-1.10.4.custom.min.js»../jquery-2.0.3.min.js’

Not sure which part of the http://partcours.de/ar-marketing-touch animation is miss firing and I am not sure where the drag/drop functionality isn’t working because I can’t get past the syntax error.

Sorry, I wasn’t much help.
Robert Fidler

idagrove commented Jan 30, 2014

Ah! In fact you did help.
Added the comma and now it works on the desktop.
Thanks, Robert.

Unfortunately, not much changed on iPad. Still isn’t working there.

Am 30.01.2014 um 09:24 schrieb Robert Fidler notifications@github.com:

Missing a comma between ‘../jquery-ui-1.10.4.custom.min.js»../jquery-2.0.3.min.js’

Not sure which part of the http://partcours.de/ar-marketing-touch animation is miss firing and I am not sure where the drag/drop functionality isn’t working because I can’t get past the syntax error.

Sorry, I wasn’t much help.
Robert Fidler

—
Reply to this email directly or view it on GitHub.

fidlerro commented Jan 30, 2014

Awesome, sorry, I am NOT an Apple user, Microsoft Fan!!

idagrove commented Jan 30, 2014

So does it work on a windows tablet?
That could narrow it down to an iOS glitch.

Awesome, sorry, I am NOT an Apple user, Microsoft Fan!!

—
Reply to this email directly or view it on GitHub.

fidlerro commented Feb 1, 2014

I don’t read German but other than that the page loads fine now.
I don’t believe the dragging of the IPhone is happening correctly.

I see multiple versions of jquery (1.7.1 and 2.0.3).
IE 11 (had to add the css «-ms-touch-action: none;» to the class «Stage_iPhone_iPhone_5s_Horz_Slvr_sRGB3_id») before the drag functionality would work with touch.

Chrome 32 (I am getting an error of «Cannot read property ‘mouse’ of undefined» in the jquery.ui.touch-punch.min.js) ** note: I only get this error on my Surface and not my desktop. The browser is acting weird so after dinner tonight, I’ll look at it further.

idagrove commented Feb 1, 2014

Right, the iPhone is supposed to be draggable.

I wonder why Adobe Edge adds another jquery. I can’t find a setting in Edge where I can turn that off.
And where in Edge would I add «-ms-touch-action: none;»?

Maybe, it’s easier to troubleshoot this when I share the Adobe Edge project:
https://partcours.box.com/s/mxstbdwhyqfs07dk6q32

Am 01.02.2014 um 02:50 schrieb Robert Fidler notifications@github.com:

I don’t read German but other than that the page loads fine now.
I don’t believe the dragging of the IPhone is happening correctly.

I see multiple versions of jquery (1.7.1 and 2.0.3).
IE 11 (had to add the css «-ms-touch-action: none;» to the class «Stage_iPhone_iPhone_5s_Horz_Slvr_sRGB3_id») before the drag functionality would work with touch.

Chrome 32 (I am getting an error of «Cannot read property ‘mouse’ of undefined» in the jquery.ui.touch-punch.min.js) ** note: I only get this error on my Surface and not my desktop. The browser is acting weird so after dinner tonight, I’ll look at it further.

—
Reply to this email directly or view it on GitHub.

Источник