用户单击外部链接时触发对话框

时间:2019-06-27 08:08:13

标签: javascript dom-events

目标是防止用户在填写表单时因意外点击外部链接而重定向。

问题:整个代码必须是抽象的。我不知道用户单击哪个链接,也不知道表单是完全填写还是部分填写。 如果表单为空,则将用户重定向而不显示对话框/确认框。

这里的代码:

function exit_confirm(event) {
   let url;
   if (event.target.nodeName === "a") {
     url = event.target.getAttribute('href');
   }
   if (window.confirm('Do you want to leave the site?')) {
      window.location.href = url;
   }
}

function getAllElementsWithDataAttribute() {
  return document.querySelectorAll('*[data-]');
}

function registerOnClickChangeKeydownEventsOfElementsWith() {

 let elementsWithDataAttribute = getAllElementsWithDataAttribute();

 ['click', 'change', 'keydown'].forEach(evt => {     
     elementsWithDataAttribute.addEventListener(evt, exit_confirm, false);
 });
}

该代码不是最终版本。
我必须从点击的链接中获取url,并将其传递给window.location.href
我还需要检查单击的链接是否为外部链接。
*[data-]-这里必须是定义链接的东西

0 个答案:

没有答案