Angular-當鼠標不在按鈕上方時，在按鈕mouseup上實現事件處理程序

Question

我想實現一鍵通按鈕，當我按下鼠標時啟用語音，而當我釋放鼠標時禁用語音。 這是我現在擁有的代碼：

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

問題場景是這樣的：

用戶點擊按鍵通話按鈕（mouseDown：調用enablePushToTalk）
用戶將鼠標從按鈕移開
用戶釋放mouse：永遠不會調用mouseUp事件，因此永遠不會調用disablePushToTalk！ 因此，一鍵通保持啟用狀態。

這是一個gif：

如何確保每次調用“ enablePushToTalk”時都調用“ disablePushToTalk”？

Answer 1

如何將ng-mouseup事件監聽器添加到父元素？

使用上述想法為您的問題創建了一個jsBin。

解決方案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鏈接： http ://jsbin.com/nedijudaga/edit?html、js，控制台，輸出

解決方案2：

僅將ng-mouseup事件添加到父元素而不添加on button 。

Angular-當鼠標不在按鈕上方時，在按鈕mouseup上實現事件處理程序

問題描述

1 個解決方案

解決方案1
1 2016-08-19 17:18:33

Angular-當鼠標不在按鈕上方時，在按鈕mouseup上實現事件處理程序

問題描述

1 個解決方案

解決方案1 1 2016-08-19 17:18:33

解決方案1
1 2016-08-19 17:18:33