Js Vanilla 动态 url + 嵌套锚点和 preventdefault

Question

如何防止具有子元素的默认锚点。我使用事件委托点击，因为 link 是动态设置的。

当用户点击时，我必须检查锚点中是否有 data-applink，在这种情况下我使用 closest 遍历来找到它的父元素（因为点击事件会检测子元素，而不是主播）。

获取父类后，添加点击事件，防止默认。但不知何故它不起作用。

请帮忙，有什么想法吗？

//simulate ajax
setTimeout(()=> {
  const anchor = document.querySelectorAll('.anchor')[0];
  anchor.setAttribute("href", "http://www.google.com");
  anchor.setAttribute("data-applink", "app://link.id");
},800);

const checkNesting = (selector, event, callback) => {
  let elem = event.target;
  if (elem.matches(selector)) {
     callback(elem);
  }else{
     elem = event.target.closest(selector);
    if (elem) {
      // console.log(elem);
       callback(elem);
    }
  }
 

}
document.body.addEventListener('click', (event) => {
  checkNesting('*[data-applink]', event, (el) => {
    el.addEventListener('click', (ev) => {
       ev.preventDefault();
    });
  });
});

<a href="#" class="anchor">
  <button>Click Here</button>
</a>

Answer 1

    el.addEventListener('click', (ev) => {
       ev.preventDefault();
    });

我最好的猜测是上面的事件侦听器在下一个单击事件而不是当前单击事件时开始工作。如果有人能提供解释，我将不胜感激。

要解决您的问题，您可以将preventDefault应用于当前event:

//simulate ajax
setTimeout(()=> {
  const anchor = document.querySelectorAll('.anchor')[0];
  anchor.setAttribute("href", "https://www.google.com");
  anchor.setAttribute("data-applink", "app://link.id");
},800);

const checkNesting = (selector, event, callback) => {
  let elem = event.target;
  if (elem.matches(selector)) {
     return true
  }
  elem = event.target.closest(selector);
  if (elem) {
    // console.log(elem);
     return true
  }
  return false
}
document.body.addEventListener('click', (event) => {
  if (checkNesting('*[data-applink]', event)) {
    event.preventDefault();
  }
});

<a href="#" class="anchor">
  <button onClick="alert('I am working fine and bubbling up is cancelled')">Click Here</button>
</a>

<a href="https://www.google.com">
<button onClick="alert('I allow bubbling up')">Click me too</button>
</a>

Answer 2

(() => {
  const anchor = document.querySelector('#anchor');

  setTimeout(()=> {
    anchor.setAttribute("href", "http://www.google.com");
    anchor.setAttribute("data-applink", "app://link.id");
  }, 800);

  anchor.addEventListener("click", (e) => {
    e.preventDefault();
    console.log('prevented');
  });
})();

我不太确定，但在我看来 'preventDefault' 过于复杂，但这个应该可以正常工作。

Js Vanilla 动态 url + 嵌套锚点和 preventdefault

Js Vanilla dynamic url + nesting anchor and preventdefault

javascript

ajax

preventdefault