How do i disable onmouse and onmouseout function on touchcreen devices only

Question

I am creating a responsive shopping site for a clothing brand and have a onmouseover="" and onmouseout="" effect on my <img> tags to show the front and back of the products, like on http://www.blackmilkclothing.com

But when viewing the site on a touchscreen device the hover effect is obviously set as a click function. which makes it not able to scroll down fluently

How would i disable this effect for touch screen devices only? Here is my code for the images

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

Answer 1

Detecting touch screen devices with Javascript - how to detect touch screen. For your code:

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