2011-08-28 53 views
1

超短版本: 基於jQuerymobile的html5 webapp上的元素不直接響應iPad上的vclicks。相反,他們默默地滾動到頁面的頂部,並觸發屏幕同一區域下的任何內容的vclick。iPad上的JQuerymobile:vclick觸發滾動到頁面頂部,然後執行vclick

LONG VERSION WITH PICTURES AND CODE: 我正在使用JQuerymobile,當我使用iPad時,我的頁面對某些vclick事件做出響應時出現問題。我有一個頁面,其中有一些元素必然會響應vclick事件。如果所有東西都能放在我的iPad顯示屏上而不需要滾動,那麼一切都很完美。如果我需要滾動才能看到我想點擊的元素,我得到了以下行爲:

我點擊我的手指在紅圈是在這裏:

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

頁面閃爍和頁面作爲迴應,如果我在小藍圈點擊區域:

(節錄缺乏超鏈接到菜鳥(這是Q43ri.png上imgur)

我困惑,到底什麼是happenin藍色圓圈圖像G不放,直到我疊加屏幕:

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> 

所有的div是inventoryTemplate項目的克隆。如果你需要的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); ('。inventoryPageQuant')。text(row.quantity).bind('vclick.inventoryPage',{row:row},generateItemQuantityDialog);

generateItemDescriptionDialog和generateItemQuantityDialog都在某些對話框頁面上設置了一些值,然後觸發對話框頁面以$ .changePage(「#thepages」)顯示。

所以呃..爲什麼會發生這種情況,我該如何讓它不發生?

(這是一個RPG角色面板的webapp如果任何人想知道爲什麼我編目武器和槍。)

+0

這聽起來像JQM/iPad中的錯誤。你有更好的運氣,你的問題在jQuery Mobile論壇(從jquery.com找到)。 –

回答

0

我想我的問題是我怎麼寫我的事件處理程序。我經歷了並補充說:

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

到每個處理程序的開始,並確保處理程序返回false。無可否認,我並不確切知道它做了什麼,所以我在這裏只是貨運,但它確實解決了這個問題。

相關問題