0

我正在为一个服装品牌创建一个响应式购物网站,onmouseover=""并对 onmouseout=""我的<img>标签产生影响以显示产品的正面和背面,例如http://www.blackmilkclothing.com

但是在触摸屏设备上查看网站时,悬停效果显然设置为点击功能。这使得它无法流畅地向下滚动

我将如何仅对触摸屏设备禁用此效果?这是我的图像代码

<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> .touchand.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 回答