Angular - Реализация обработчика событий при наведении мыши на кнопку, когда мышь не находится над кнопкой

Question

Angular - Реализация обработчика событий при наведении мыши на кнопку, когда мышь не находится над кнопкой

0

Я хочу использовать кнопку Push To Talk, которая позволяет голосу при нажатии мыши и отключает голос при отпускании мыши. Вот код, который у меня есть прямо сейчас:

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

Сценарий проблемы следующий:

Пользователь нажимает кнопку PTT (вызывается mouseDown: enablePushToTalk)
Пользователь перемещает мышь от кнопки
Пользователь освобождает мышь: событие mouseUp никогда не вызывается, поэтому disablePushToTalk никогда не вызывается! Таким образом, Push To Talk остается включенным.

Здесь gif:

Как я могу гарантировать, что "disablePushToTalk" вызывается для каждого вызова "enablePushToTalk"?

Lanaru 19 авг. 2016, в 19:25

Источник

Теги:

javascript

jquery

html

angularjs

frontend

1 ответ

Ещё вопросы

Gopinath Shiva · Answer 1 · 2016-08-19T14-18-00.000Z

Как насчет добавления прослушивателя событий 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 будет зарегистрировано.
У меня есть ваша проблема, но позволяет ли ваше приложение сделать это пользователю? если нет, то вы запускаете (или даже предупреждаете пользователя перед запуском) указатель мыши, если он покидает окно браузера
Спасибо, я добавил хендлер событий в ng-mouseleave, чтобы отключить функцию push to talk