15

2つの画像を切り替えて、それらの違いを示す写真コンセプトのデモを作成しました。

iPadを除いて、正常に機能するonMouseClickイベントがあります。デスクトップでは応答は瞬時ですが、タブレットではかなり遅れます。おそらく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/

4

4 に答える 4

15

iOSは、ジェスチャー/スワイプが正しく機能するように、クリックイベントを意図的に遅らせます。たとえば、要素に触れると、要素に対してクリックイベントを発生させるのではなく、ページ全体をスクロールすることを意味する場合があります。よりきめ細かい制御を実現するには、タッチイベントを使用します。

参照：https ：//developer.mozilla.org/en-US/docs/DOM/Touch_events

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

タッチイベントのキャプチャには結果が生じることに注意してください。たとえば、ユーザーが期待する動作（スワイプなど）をオーバーライドできます。

また、マークアップとスクリプトをより明確に分離するために、通常はマークアップとは独立して（インラインではなく）イベントをバインドする必要があることにも注意してください。

これは、マークアップとは別にイベントをバインドし、clickとイベントの両方を処理するjQueryを使用した例touchstartです。Chrome 21、FF 15、IE9、およびiPad3でテスト済み。

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(); 
});
于 2012-09-14T01:47:24.887 に答える
2

より高速で応答性の高いボタンについては、次のリンクを確認してください： https ://developers.google.com/mobile/articles/fast_buttons?hl=de-DE&csw=1

于 2013-11-14T14:27:48.190 に答える
2

タッチエンドイベントハンドラーの実装

クリックやタッチスタートとは異なり、タッチエンドイベントは300ミリ秒の遅延なしに即座に発生します。これは、タッチのみのWebGLまたはキャンバスベースのゲームを開発している場合は実用的かもしれませんが、標準のWebページでタッチエンドだけに依存することはできません。

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

    //code here...

});
于 2014-10-24T04:39:02.267 に答える
0

IOSデバイスのイメージでいくつかの問題が発生しました。たとえば、自分のサイトでHTML5のグラデーションとシャドウ（画像も）を使用していますが、画像を削除すると応答に大きな違いがあることに気づきました。

添付のクリックイベントは正常に機能していますが、Safariが画像でビジー状態になっている（常に再描画している）ため、応答が遅くなります。

iPad3を使ってテストしました。ある男がIOSの画像の問題について興味深い記事を書いています。

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

于 2012-09-14T02:17:23.587 に答える