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

【问题标题】：How do i disable onmouse and onmouseout function on touchcreen devices only如何仅在触摸屏设备上禁用鼠标和 onmouseout 功能
【发布时间】：2013-04-11 13:10:32
【问题描述】：

我正在为一个服装品牌创建一个响应式购物网站，并在我的<img> 标签上设置onmouseover="" 和onmouseout="" 效果，以显示产品的正面和背面，例如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>

【问题讨论】：

标签： jquery html hover onmouseover onmouseout

【解决方案1】：

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;
    }
}

【讨论】：

非常感谢，效果很好。该网站仍然存在滚动问题，但必须归结为我无法弄清楚的其他问题

【解决方案2】：

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

【讨论】：

【解决方案3】：

我只能想到http://modernizr.com/，它可以让您知道观看者是否有触摸屏。

插件为<html>.touch和.no-touch添加一个类

现在你可以做类似的事情

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

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

【讨论】：