angular event firing on wrong element

Question

Question:

I have a container with a bound (wheel) event listener containing some headings and paragraphs just for demo purposes. When I use the mouse wheel to scroll, the scroll event is occurring on one of the inner elements rather than on the container having the bound event.

Why is an event firing on a child element of a container rather than on the bound element itself?

Background:

I am playing around with angular on StackBlitz and wanted to implement an event listener on a <div> container to handle the scroll event:

  <div class="inner no-scroll" (wheel)="blockScroll($event)">

In my app.component.ts I created the event handler to be called:

blockScroll(e) {

    console.log(e);

    if (e.target !== e.currentTarget) {
      return;
    }

    let eO = e; // e.originalEvent;
    var delta = eO.deltaY || -eO.detail;
    e.target.scrollTop += delta * 30;

    e.stopPropagation();
    e.preventDefault();
}

In Firefox Developer Tools I see that the event is properly bound to the <div>:

Now when I use the mouse wheel over the container I see that in nearly all cases the event target is not the bound <div> but rather a <h3> or <p> element inside of the container. I wonder why the wrong element is triggering the scroll event?

The event is stil triggering on the correct element. Events bubble up to their parents. That is expected behaviour I’m afraid.. — MikeOne
– MikeOne, Commented May 18, 2020 at 11:27
target is an element event was triggered on, currentTarget is an element listens to the event — Shlang
– Shlang, Commented May 18, 2020 at 11:29
Thanks both for the answer. @Shlang It seems the event object angular passes to the event listener is not following the standard as currentTarget is always null. MikeOne, how could I then stop the event from being propagated to elements outside of the container having the listener attached? — SaschaM78
– SaschaM78, Commented May 18, 2020 at 13:08
@SaschaM78 Please carefully read the note in the dosc. Event object is mutable, so currentTarget may be null when it is console logged, but it is not so when the event is actually is being handled. — Shlang
– Shlang, Commented May 18, 2020 at 13:29
@Shlang thanks for pointing me to this, I hadn't known this. Problem solved. — SaschaM78
– SaschaM78, Commented May 18, 2020 at 14:21

Barremian · Accepted Answer · 2020-05-18 13:03:43Z

1

This is the expected behavior.

target - element that triggered event (element directly under the mouse pointer at the beginning of the scroll)
currentTarget - element that listens to event (the div element in this case)

So if you were to point at the top of the container and begin scrolling, both target and currentTarget would point to the same div element. But once it's scrolled past the top of the container, the elements directly beneath the mouse pointer would be the <p> or <h3> elements.

edited May 18, 2020 at 13:03

answered May 18, 2020 at 11:37

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SaschaM78 Over a year ago

Thanks for the answer. When I console.log(e); I see that "currentTarget" is null, no matter if the event was triggered on the DIV or P tag. Also target and originalTarget always point to the same object. So how would I find the pointer that points to the element that had the event listener attached?

SaschaM78 Over a year ago

Thanks for pointing me in the right direction, this helped me solve the problem.

Azoulay Jason Over a year ago

How did you solve it ?

Collectives™ on Stack Overflow

angular event firing on wrong element

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related