Я просто хотел чем-то поделиться с вами.
Я получил некоторое трудное время с ng-mouseenter
иng-mouseleave
события.
Тематическое исследование:
Я создал плавающее навигационное меню, которое переключается, когда курсор находится над значком.
Это меню было в верхней части каждой страницы.
- Для обработки показать / скрыть в меню, я переключаю класс.
ng-class="{down: vm.isHover}"
- Для переключения vm.isHover я использую события мыши ng.
ng-mouseenter="vm.isHover = true"
ng-mouseleave="vm.isHover = false"
На данный момент все было хорошо и работало как положено.
Решение чисто и просто.
Поступающая проблема:
В конкретном представлении у меня есть список элементов.
Я добавил панель действий, когда курсор находится над элементом списка.
Я использовал тот же код, что и выше, для обработки поведения.
Эта проблема:
Я выяснил, когда мой курсор находится в плавающем меню навигации, а также в верхней части элемента, существует конфликт между собой.
Панель действий появилась, а плавающая навигация была скрыта.
Дело в том, что даже если курсор находится над плавающим меню навигации, элемент списка ng-mouseenter срабатывает.
Это не имеет смысла для меня, потому что я ожидал бы автоматического прерывания событий распространения мыши.
Я должен сказать, что я был разочарован, и я трачу некоторое время, чтобы выяснить эту проблему.
Первые мысли:
Я пытался использовать это:
$event.stopPropagation()
$event.stopImmediatePropagation()
Я объединил много событий указателя ng (mousemove, mouveover, ...), но ни одно из них мне не помогло.
CSS решение:
Я нашел решение с помощью простого свойства CSS, которое я использую все больше и больше:
pointer-events: none;
По сути, я использую это так (в моих элементах списка):
ng-style="{'pointer-events': vm.isHover ? 'none' : ''}"
С этим хитрым, события ng-mouse больше не будут вызываться, и мое плавающее меню навигации больше не будет закрывать себя, когда курсор находится над ним и над элементом из списка.
Чтобы идти дальше:
Как и следовало ожидать, это решение работает, но мне оно не нравится.
Мы не контролируем наши события, и это плохо.
Кроме того, у вас должен быть доступ к области vm.isHover
действия, чтобы достичь этого, и это может быть невозможным или невозможным, но грязным в той или иной мере.
Я мог бы поиграть, если кто-то захочет посмотреть.
Тем не менее, у меня нет другого решения ...
Это длинная история, и я не могу дать вам картошку, поэтому, пожалуйста, прости меня, мой друг.
Во всяком случае, pointer-events: none
это жизнь, так что запомни это.