jQuery Мобильный переход на элемент выделяет элемент на следующей странице?

Question

У меня есть приложение для Android, созданное с помощью Phonegap (3.1.0) и jQuery Mobile (1.4.0), с использованием макета одной страницы (поэтому каждая страница имеет собственный HTML-файл).

Это то, что происходит:

• page1.html имеет кнопку в положении X-Y. Эта кнопка выполняет $.mobile.pageChange('page2.html); по щелчку (кран в случае сенсорных устройств)
• page2.html имеет список элементов с помощью JQuery Mobile список ракурса данных-роль
• При нажатии на кнопку page1, переход происходит, как следует, с указанием стр. 2. Странно, что элемент списка, позиция которого совпадает с нажатой кнопкой в ​​стр. 1, отображается непосредственно подсвеченной (тот же самый момент, когда вы нажимаете элемент списка).

Технически ни один элемент этого списка не должен быть выделен до тех пор, пока пользователь не коснется его, поэтому по какой-то причине страница «запоминает» последнюю позицию на экране и после перехода показывает, какой элемент находится в том же как будто он уже был использован.

Есть ли способ избежать этого?

Answer 1

К сожалению, у меня пока нет ответа. Но я могу подтвердить, что замена:

$.mobile.pageChange (which is now depreciated) 

также показывает ту же проблему:

$.mobile.pageContainer.pagecontainer("change", "page2.html", { transition: "none" }); 

Также я испытываю такую ​​же проблему с кнопками в заголовке. Если a есть кнопка в заголовке страница2, и кнопка была нажата в том же месте на стр. 1 кнопки подсветки и/или активированы на указанной кнопке.

Еще одна проблема, которую я нашел, зависит от того, как вызывается $.mobile.pageChange или $.mobile.pageContainer. При использовании onclick возникает проблема выделения. Однако, если использовать ontouchend на стр. 1 Я считаю, что если кнопка расположена в том же месте, что и кнопка не только подсвечивается, но и фактически нажимается/постукивается.

Answer 2

У меня была эта точная проблема с текущей версией jqm 1.4.5.

В принципе, набранное пятно на мобильном устройстве будет выделять элементы на следующей странице - с использованием многостраничной версии. Тестирование этого на ПК подтвердило мое подозрение, что это последнее место, где вы наводили указатель мыши, поэтому последнее место, где вы нажали кнопку на предыдущей странице. Это привело к некоторым другим ошибкам в моем случае -> иногда выделенный элемент оставался бы выделенным даже при нажатии в другом месте на странице.

Попытка удалить классы и возиться с JS в целом, как предложено в многочисленных результатах поиска, не сработала для меня. В конце я сделал несколько простых CSS-изменений в пользовательском файле - вставлен после jqm css-файлов.

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

/* quick fix 'tap -> highlights element next page'-bug 
* : change on/off states to a fixed background color 
* so we avoid hover mechanisms 
* 'on'-elements stay highlighted 
*/ 
html body .ui-controlgroup-vertical .ui-radio-on, 
html body .ui-checkbox-on, 
html body .ui-collapsible .ui-collapsible-heading .ui-collapsible-heading-toggle { /* selected radio/checkbox/collapsible */ 
    background-color: #eee !important; 
} 

html body .ui-radio-off, 
html body .ui-checkbox-off, 
html body .ui-collapsible-collapsed .ui-collapsible-heading-collapsed .ui-collapsible-heading-toggle { /* all unselected radio/checkbox/collapsible */ 
    background-color: #f6f6f6 !important; 
} 

html body .ui-collapsible .ui-collapsible-heading .ui-btn-active { /* collapsible tap state */ 
    background-color: #38c !important; 
} 

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

(я тестировал только это на ПК и Android устройств, нуждается в проверке на IOS)