iPad上的點擊事件響應緩慢

Question

我做了一個照片概念的演示，在兩個圖像之間切換以顯示它們之間的差異。

我有一個onMouseClick事件工作正常，除了在iPad上。 我的桌面上的響應是即時的，但平板電腦上的延遲可能是500毫秒？

這是正常的嗎？ 還有另一種方法可以解決這個問題嗎？

使用Javascript：

var img1 = new Image();
img1.src = "http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg";

var img2 = new Image();
img2.src = "http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg";


function test() {
    if (document.pic.src == 'http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg') {

        document.pic.src = 'http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg';
    }
    else if (document.pic.src == 'http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg') {

        document.pic.src = 'http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg';
    }
}​

身體：

 <div>
   <table id="table-1" >
   <tr><td>
      <img id="img" src="http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg" name="pic" onMouseDown="test()"/>
       <img id="png1" src="http://www.thedigitaltrekker.com/wp-content/uploads/2012/03/logo-6smA.png"/>
Click on the image above to toggle between 19mm and 200mm <br>
   </td></tr>
   </table>
</div>
​

同樣在jsfiddle： http ： //jsfiddle.net/ntmw/R4pey/5/

Answer 1

iOS有目的地延遲點擊事件，以便手勢/滑動正常工作。 例如，當您觸摸元素時，您可能意味着滾動整個頁面，而不是觸發元素上的click事件。 要實現更精細的控制，請使用觸摸事件。

請參閱： https ： //developer.mozilla.org/en-US/docs/DOM/Touch_events

使用touchstart示例： http ： //jsfiddle.net/R4pey/7/ 。

請注意，捕獲觸摸事件會產生影響，例如，您可能會覆蓋用戶期望的行為（如滑動）。

另請注意，您通常應獨立於標記（而非內聯）綁定事件，以實現標記和腳本的更清晰分離。

這是一個使用jQuery 的例子 ，它將事件與標記分開綁定，並處理click和touchstart事件。 在Chrome 21，FF 15，IE9和iPad 3上測試過。

var url1 = "http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg";
var url2 = "http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg";

// preload from original code
var img1 = new Image();
img1.src = url1;

var img2 = new Image();
img2.src = url2;

// bind the click and touchstart events
$("#img").on("click touchstart", function(e){
    if (this.src == url1) {
        this.src = url2;
    }
    else if (this.src == url2) {
        this.src = url1;
    } 

    // When touch event fires, this is needed to prevent the click
    // event from firing as well as @RyanWheale noted in the comments.
    e.preventDefault(); 
});

Answer 2

請查看以下鏈接，了解更快速，更快速的按鈕： https ： //developers.google.com/mobile/articles/fast_buttons？hl = de-DE＆ccs = 1

Answer 3

實現touchend事件處理程序

與click和touchstart不同， touchend事件會在沒有300ms延遲的情況下立即觸發。 如果您正在開發基於觸摸的WebGL或基於畫布的游戲，這可能是實用的，但是，您不能僅僅依賴於標准網頁中的touchend。

$('#id').on('touchstart',function(e) {                

    //code here...

});

Answer 4

我在IOS設備上遇到了一些圖像問題。 例如，我在我的網站上使用HTML5漸變和陰影（也是圖像），並在刪除圖像時注意到巨大的響應差異。

附加的點擊事件工作正常，但響應很慢，因為Safari似乎忙於圖像（不斷重繪）。

我用iPad3來測試它。 一個人寫了一篇關於IOS圖像問題的有趣文章。

見： http ： //roman.tao.at/dev/mobile-safari-memory-usage-with-images/