Angular - 当鼠标不在按钮上时，在按钮 mouseup 上实现事件处理程序答案

【问题标题】：Angular - Implementing event handler on button mouseup when mouse is not over the buttonAngular - 当鼠标不在按钮上时，在按钮 mouseup 上实现事件处理程序
【发布时间】：2016-12-26 22:01:30
【问题描述】：

我想实现一个 Push To Talk 按钮，当我按下鼠标时启用语音，当我松开鼠标时禁用语音。这是我现在拥有的代码：

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

问题场景是这样的：

用户点击一键通按钮（mouseDown：调用 enablePushToTalk）
用户将鼠标从按钮上移开
用户释放鼠标：从不调用 mouseUp 事件，因此从不调用 disablePushToTalk！所以一键通保持启用状态。

这是一个 gif：

如何确保每次调用“enablePushToTalk”时都会调用“disablePushToTalk”？

【问题讨论】：

标签： javascript jquery html angularjs frontend

【解决方案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,console,output

解决方案 2：

仅将ng-mouseup 事件添加到父元素而不是button 就可以解决问题。

【讨论】：

谢谢，这似乎效果更好（我尝试了解决方案 2）。但是后来我遇到了第二个问题：如果鼠标在父元素之外时用户鼠标向上怎么办？例如，如果用户在浏览器窗口外释放鼠标，则似乎不会注册 mouseup 事件。
我遇到了您的问题，但是您的应用要求是否允许用户这样做？如果不是，那么如果他离开浏览器窗口，您就会触发（甚至在触发之前提醒用户）mouseup
谢谢，我最终在 ng-mouseleave 上添加了一个事件处理程序来禁用推送通话
酷。继续摇摆:)