javascript - mouseover event and click event on same element conflicts on mobile -
javascript - mouseover event and click event on same element conflicts on mobile -
i'm using angular.js build website, , have element mouseover event supposed show navbar, , on mobile, clicking on element, supposed show navbar + menu.
these 2 events conflict.
any ideas?
//navbar fade in mouse on menu button angular.element('.picture_hamburger>.text').on('mouseover', function() { angular.element('#navbar').stop().fadein(); btnstate.setposition(1); // navbar fade out mouse out of button angular.element('.menu_hamburger').one('mouseout', function() { btnstate.setposition(0); }); }); //menu open click angular.element('.picture_hamburger>.text').click(function () { angular.element('#navbar').finish().slidedown(); btnstate.openmenu(); });
if able utilize modernizr (js library checking html5 stuff), provides best method checking if client mobile or not. can in pure javascript think, after countless tries gave up:
by using modernizr.touch, can see if device touch capable or not. touch screens quite unique phones , pads, unfortunately laptops have touchscreens (not many of these give thanks god).
so code this:
//navbar fade in mouse on menu button angular.element('.picture_hamburger>.text').on('mouseover', function() { if(modernizr.touch) { return; } angular.element('#navbar').stop().fadein(); btnstate.setposition(1); // navbar fade out mouse out of button angular.element('.menu_hamburger').one('mouseout', function() { if(modernizr.touch) { return; } btnstate.setposition(0); }); }); //menu open click angular.element('.picture_hamburger>.text').click(function () { angular.element('#navbar').finish().slidedown(); btnstate.openmenu(); });
so, if mobile , mouseover , mouseout fires, returns before executing - way want.
modernizr can found @ http://www.modernizr.com/
javascript jquery angularjs
Comments
Post a Comment