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

我想實現一鍵通按鈕，當我向下鼠標時啓用語音，並在釋放鼠標時禁用語音。下面的代碼我現在所擁有的：Angular - 當鼠標不在按鈕上時，在按鈕mouseup上實現事件處理程序

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

問題的情形是這樣的：

用戶點擊一鍵通按鈕（鼠標按下：enablePushToTalk叫）
用戶從按鈕
用戶釋放鼠標：mouseUp事件永遠不會被調用，因此disablePushToTalk永遠不會被調用！所以Push To Talk保持啓用狀態。

這裏有一個GIF：

如何確保「disablePushToTalk」被調用，每一次「enablePushToTalk」之稱？

來源

2016-08-19 Lanaru

如何將一個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,console,output

解決方案2：

將一個ng-mouseup事件添加到父元素而不是button會做伎倆。

來源

2016-08-19 17:18:33

謝謝，這似乎工作得更好（我試過解決方案2）。但後來我遇到了第二個問題：如果用戶在鼠標位於父元素之外時嵌入了該元素，該怎麼辦？例如，如果用戶在瀏覽器窗口之外釋放鼠標，它似乎不會註冊mouseup事件。 – Lanaru

我得到了你的問題，但你的應用程序要求允許用戶做到這一點？如果不是那麼你觸發（甚至在觸發之前提醒用戶）mouseup，如果他離開瀏覽器窗口 –

謝謝，我最終在ng-mouseleave上添加了一個事件heandler來禁用一鍵通 – Lanaru

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

回答

相關問題