CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsfrontend
Lanaru
Lanaru

Reputation: 9721

Angular - Implementing event handler on button mouseup when mouse is not over the button

I want to implement a Push To Talk button that enables voice when I mouse down, and disables voice when I release the mouse. Here's the code I have right now:

    <button ng-mousedown="enablePushToTalk()" ng-mouseup="disablePushToTalk()" class="btn"> PushToTalk </button>

The problem scenario is this:

  1. User hits push to talk button (mouseDown: enablePushToTalk is called)
  2. User moves mouse away from button
  3. User releases mouse: mouseUp event is never called, thus disablePushToTalk is never called! So Push To Talk stays enabled.

Here's a gif:

Buggy behavior

How do I ensure that "disablePushToTalk" gets called for every time that "enablePushToTalk" is called?

Upvotes: 0

Views: 1102

Answers (1)

Gopinath Shiva
Gopinath Shiva

Reputation: 3892

How about adding an ng-mouseup event listener to a parent element?

Created a jsBin using above idea for your problem.

Solution 1:

//html

<body style='height:500px;border:1px solid black;' ng-controller="MyCtrl" ng-mouseup='disable()'>
<div >
  <button ng-mousedown="enablePushToTalk()" ng-mouseup="disablePushToTalk()" class="btn"> PushToTalk </button>
</div>
</body>

//js

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    var isMouseUp = false;
    $scope.enablePushToTalk = function(){console.log('mouseup');isMouseUp=true;}
    $scope.disablePushToTalk = function(){console.log('mousedown');isMouseUp=false;}
    $scope.disable = function(){if(!isMouseUp) return;console.log('mousedown from body');isMouseUp=false;}
}

jsBin link: http://jsbin.com/nedijudaga/edit?html,js,console,output

Solution 2:

Adding an ng-mouseup event only to parent element and not on button would do the trick.

Upvotes: 1

Related Questions