Question

如何防止具有子元素的默认锚点。由于链接是动态设置的，因此我使用事件委托单击。

用户单击时，我必须检查锚点中是否有data-applink，在这种情况下，我使用closest进行遍历以查找其父级（因为click事件将检测子元素，而不是锚点）。

获得父项后，然后添加click事件并阻止默认。但是以某种方式不起作用。

请帮忙，有什么主意吗？

//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();
    });

我的最佳猜测是上述事件监听器在下一个click事件而不是当前事件开始工作。如果有人可以提供解释，我将非常感激。

要解决您的问题，可以将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 +嵌套锚并防止默认

2 个答案: