0

私は衣料品ブランドのレスポンシブ ショッピング サイトを作成しており、http://www.blackmilkclothing.comのように、製品の表と裏を表示するためにタグにonmouseover=""影響を onmouseout=""与えています。<img>

しかし、タッチスクリーン デバイスでサイトを表示すると、ホバー効果は明ら​​かにクリック機能として設定されます。これにより、スムーズに下にスクロールできなくなります

タッチ スクリーン デバイスのみでこの効果を無効にするにはどうすればよいですか? ここに画像の私のコードがあります

<div class="product">
   <a href="">
      <img src="pic.jpg"onmouseover="this.src='pic2.jpg'"onmouseout="this.src='pic.jpg'" />
   </a>
</div>
4

3 に答える 3

1

Javascript を使用したタッチ スクリーン デバイスの検出- タッチ スクリーンを検出する方法。あなたのコードのために：

var is_touch_device = 'ontouchstart' in document.documentElement;
    if (is_touch_device) {
    var elements = document.getElementsByTagName("img");
    for (var i=0;i<elements.length;i++) {
        elements[i].onmouseover = null;
        elements[i].onmouseout = null;
    }
}
于 2013-04-11T13:26:41.703 に答える
0

視聴者にタッチスクリーンがあるかどうかを知ることができるhttp://modernizr.com/についてしか考えられません。

<html> .touchプラグインはクラスをandに追加します.no-touch

今、あなたは次のようなことができます

if($('html').hasClass('no-touch')){
   $('img').mouseover(function(){ //change pic 
           }).mouseout(function(){ //change back 
           });
}

mouseoverこれにより、タッチスクリーンのないデバイスのイベントのみが追加されます

于 2013-04-11T13:22:29.217 に答える
0

ページの読み込み時にユーザー エージェントをテストし、「onmouseover」イベントと「onmouseout」イベントを動的に割り当てる必要があると思います (ユーザー エージェントがモバイルでない場合)。すべて JQuery または Javascript を使用します。

于 2013-04-11T13:25:07.563 に答える