Why is the default event action prevented when calling e.preventDefault() in the parent element?

  Kiến thức lập trình

The default action when pressing nav__link is to go to a certain section. When I don’t have e.preventDefault() in the parent element, the default action of going to a section is executed. But when I place e.preventDefault() in the parent element, the default event action is not executed but console.log(e.defaultPrevented) prints false. Why is the default still prevented?

//Child ------------------------
document.querySelectorAll('.nav__link').forEach(function (val, i) {
  val.addEventListener('click', function (e) {
    const id = this.getAttribute('href');
    document.querySelector(id).scrollIntoView({ behavior: 'smooth' });
    console.log(e.defaultPrevented); // false
  });
});


//Parent -------------------------------
document.querySelector('.nav__links').addEventListener('click', function (e) {
  console.log('parent');
  e.preventDefault();
});

I was expecting that the default action is going to be executed still

1

LEAVE A COMMENT