JQuerymobile на iPad: vclick запускает прокрутку до верхней части страницы, затем выполняет vclick - PullRequest
Новая
       20

JQuerymobile на iPad: vclick запускает прокрутку до верхней части страницы, затем выполняет vclick

1 голос
/ 28 августа 2011

Супер короткая версия: Элементы веб-приложения html5 на основе jQuerymobile не отвечают непосредственно на vclicks на iPad. Вместо этого они молча прокручивают верхнюю часть страницы и запускают щелчок мышью по всему, что находится в той же области экрана.

ДЛИТЕЛЬНАЯ ВЕРСИЯ С КАРТИНАМИ И КОДОМ: Я использую JQuerymobile, и у меня проблема с тем, что моя страница реагирует на некоторые события vclick, когда я использую свой iPad. У меня есть страница с кучей элементов, которые должны отвечать на события vclick. Если все умещается на дисплее моего iPad без прокрутки, все работает отлично. Если мне нужно прокрутить, чтобы увидеть элемент, на который я хочу щелкнуть, я получу следующее поведение:

Я касаюсь пальца, где красный круг здесь:

http://imgur.com/3L9qR.png

Страница мерцает, и страница реагирует так, как будто я щелкнул область в маленьком синем круге:

(изображение синего круга отредактировано из-за отсутствия гиперссылок на noobs (Это imgur.png Q43ri.png)

Я был смущен тем, что, черт возьми, происходило, пока я не наложил экраны:

http://imgur.com/KMPqQ.png

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

Вот HTML-код для этого раздела страницы: 

 <div id="inventoryPageContainer" style="padding-right: 100px;">
     <div id="inventoryDisplayHeaders">
    <div class="inventoryPageName inventoryPageColumn header">Name</div>
    <div class="inventoryPageQuant inventoryPageColumn header">#</div>
    <div class="inventoryPageWt inventoryPageColumn header">Wt.</div>
</div>
</div>
<div id="inventoryTemplate" class="inventoryPageRow" style="display: none;">
    <div class="inventoryPageName inventoryPageColumn">Template Item Name</div>
    <div class="inventoryPageQuant inventoryPageColumn">#</div>
    <div class="inventoryPageWt inventoryPageColumn">X lb</div>
</div>
<div style="clear: both; border-bottom: 2px solid black;"></div>

Все дивы являются клонами этого предмета инвентаря. Если вам нужен CSS для этого (я не знаю человека, я пытаюсь дать кому-нибудь, кто читает эту информацию, всю имеющуюся у меня информацию): 

 #inventoryPage .inventoryPageName {
     width: 100%;
 }

 #inventoryPage .inventoryPageQuant {
     width: 50px;
     margin-right: -50px;
     vertical-align: middle;
 }

 #inventoryPage .inventoryPageWt {
     width: 50px;
     margin-right: -50px;
     right: -50px;
     vertical-align: middle;
 }

Вот код привязки события: templateCopy.find ('. inventoryPageName'). text (row.itemName) .bind ('vclick.inventoryPage', {row: row}, generateItemDescriptionDialog); templateCopy.find ('. inventoryPageQuant'). text (row.quantity) .bind ('vclick.inventoryPage', {row: row}, generateItemQuantityDialog);

generateItemDescriptionDialog и generateItemQuantityDialog оба устанавливают некоторые значения на некоторых страницах диалога, а затем запускают отображение страниц диалога с помощью $ .changePage ("# thepages").

Так э-э ... почему это происходит и как мне этого не делать?

(Это веб-приложение для персонажей RPG, если кому-то интересно, почему я каталогизирую оружие и оружие.)

1 Ответ

0 голосов
/ 30 августа 2011

Я думаю, что моя проблема заключалась в том, как я писал свои обработчики событий.Я прошел и добавил: 

if (event.preventDefault)
     event.preventDefault();

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

...