jQuery click event just for touch, for all others hover

Question

I tried to modify my jQuery code, to use the "hover" event just on default desktop devices and take the "click" function just on touch devices. For reason, that there is a better usability by separating them.

I posted my whole code in this Fiddle: http://jsfiddle.net/syZC6/

 $(document).ready(function(e){
              $("header").hover(function() {   
                  if ($('#expandMenu').is(':visible'))
                  {
                      $('#menubar').removeClass('menu-active');
                      $('#switcher').removeClasse'switcherOpen');
                  }
                  else
                  {
                      $('#menubar').addClass('menu-active');
                      $('#switcher').addClass('switcherOpen');
                  }

                  $('#expandMenu').slideToggle( "fast");
               });          
                });

Maybe there is a solution, like I have done it before:

$(window).width() < 900 ? "true" : "false",

But it just detects the current width on window load, and not the kind of device…

Thanks a lot for your help!

Answer 1

You could declare the event based on your conditions

DEMO http://jsfiddle.net/e2fc7/

   var touchscreen;
   if (window.matchMedia("(max-width: 300px)").matches) {
       touchscreen = true;
   } else {
       touchscreen = false;
   }

   var evt = touchscreen ? 'touchstart' : 'mouseenter';

   $("header").bind(evt, function () {
       if ($('#expandMenu').is(':visible')) {
           $('#menubar').removeClass('menu-active');
           $('#switcher').removeClasse 'switcherOpen');
   } else {
       $('#menubar').addClass('menu-active');
       $('#switcher').addClass('switcherOpen');
   }
   $('#expandMenu').slideToggle("fast");
   });