Question

我正在为服装品牌创建响应式购物网站，并对我的onmouseover=""标签产生onmouseout=""和<img>效果，以显示产品的正面和背面，例如{ {3}}

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

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

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

Answer 1

我只能考虑http://modernizr.com/让你知道观众是否有触摸屏。

该插件为<html> .touch和.no-touch

添加了一个类

现在你可以做点什么了

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

这只会为没有触摸屏的设备添加mouseover事件

Answer 2

我认为您应该在页面加载时测试用户代理并动态分配“onmouseover”和“onmouseout”事件（如果用户代理不是移动的），全部使用JQuery或Javascript。

Answer 3

Detecting touch screen devices with 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;
    }
}

如何仅在触摸屏设备上禁用鼠标和onmouseout功能

3 个答案: