Есть ли способ выборочно использовать события мыши на наложенных элементах? - PullRequest
Новая
       5

Есть ли способ выборочно использовать события мыши на наложенных элементах?

0 голосов
/ 04 января 2019

У меня есть компонент-слайдер, который должен обрабатывать все события нажатия.Я наложил несколько подсказок на этот слайдер, используя абсолютное позиционирование.Я хочу, чтобы можно было навести курсор мыши на значки подсказок и вызвать событие наведения мыши, но я не хочу, чтобы эти значки блокировали нажатие на ползунок.

Есть идеи?

ДляСлайдер, я использую "мат-слайдер" от Angular Materials.Для значков у меня есть mat-icons, которые используют matTooltip.

Не думаю, что этот вопрос действительно специфичен для Angular, но я очень признателен за любую помощь:)

Немного кода, чтобы показать, но вот изображение того, как выглядит слайдер.Значки комментариев могут блокировать нажатие на слайдер.Прямо сейчас у меня есть значки комментариев, использующие этот класс: 

.comment-icon {
position: absolute;
z-index: -1;
}

1 Ответ

0 голосов
/ 04 января 2019

Это сложный вопрос, поскольку что-то вроде pointer-events: none; не позволит ховеру и даже JS прослушивать события наведения мыши.

Что вы можете сделать, это добавить прослушиватель щелчков во всплывающие подсказки, и если положение мыши находится в пределах ползунка, это также вызовет событие щелчка.

Что-то вроде: 

document.querySelector('.comment-icon').addEventListener('click', e => {
    const slider = document.querySelector('.slider');
    const sliderBounds = slider.getBoundingClientRect();

  if (e.clientX >= sliderBounds.left && e.clientX <= sliderBounds.right
    && e.clientY >= sliderBounds.top && e.clientY <= sliderBounds.bottom) {
        slider.click();
  }
});

Вот быстрая скрипка: http://jsfiddle.net/wfpv5oka/2/

...