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>

score 1 · Accepted Answer · edited May 23 '17 at 12:04

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

edited May 23 '17 at 12:04

Community

1
1

answered Apr 11 '13 at 13:26

Sergei Gorjunov

1,789
1
14
22

Thanks alot worked great. still having scrolling issues with the site though must be down to something else which i can't figure out – aztekgold Apr 11 '13 at 14:21

Spokey · Answer 2 · 2013-04-11T13:33:00.000

I can only think about http://modernizr.com/ which lets you know if the viewer has a touch-screen or not.

The plugin adds a class to the <html> .touch and .no-touch

Now you could do something like

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

This will only add the mouseover event for devices without touch-screens

score 0 · Answer 3 · answered Apr 11 '13 at 13:25

0

I think you should test the User Agent on the load of the page and assign the "onmouseover" and "onmouseout" events dynamically (if the User Agent is not mobile), all using JQuery or Javascript.

answered Apr 11 '13 at 13:25

Teo

125
1
11

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

3 Answers3