1

I have a button inside a div. The button should be visible only when mouse is over the div. This works well on PC with mouse. However, on a tablet or phone, mouse over event is triggered when you first touch the div. The problem is that if you touch the place where the button is (although invisible yet), it will make the button visible and trigger its click event at the same time. So, how can I delay the button click event?

Here is my sample code:

<div ng-mouseenter="isMouseOver=true" ng-mouseleave="isMouseOver=false">
    <div>OTHER STUFF</div>
    <button ng-show="isMouseOver" ng-click="clicked()">Click</button>
</div>
Tom
  • 7,640
  • 1
  • 23
  • 47
newman
  • 6,841
  • 21
  • 79
  • 126
  • What you need does not make much sense for mobile. There is [no mouseover](http://stackoverflow.com/questions/2427447/does-css-hover-work-on-mobile-devices) event for phones/tablets. I recommend you to verify another UX for your users. – Zanon Sep 30 '15 at 01:20

1 Answers1

0

you can try to unbind the click event using jquery. try something like:

hml:

<div ng-mouseenter="isMouseOver=true" ng-mouseleave="isMouseOver=false">
    <div>OTHER STUFF</div>
    <button id="beingClicked" ng-show="isMouseOver" ng-click="clicked()">Click</button>
</div>

js (jQuery)

//if is a mobile device
if(!!('ontouchstart' in window)){//check for touch device
  $('#beingClicked').off('click');
}

P.s: It is not tested by worth giving atry.

Nishanth Matha
  • 5,993
  • 2
  • 19
  • 28