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上实现事件处理程序

回答

相关问题