Js Vanilla динамический URL + вложенность якоря и предотвращение по умолчанию - PullRequest
Новая
       6

Js Vanilla динамический URL + вложенность якоря и предотвращение по умолчанию

0 голосов
/ 07 декабря 2018

Как предотвратить привязку по умолчанию, которая имеет дочерний элемент.Я использую делегат события, так как ссылка устанавливается динамически.

Когда пользователь щелкает, я должен проверить, есть ли у него 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>

Ответы [ 2 ]

0 голосов
/ 07 декабря 2018 
(() => {
  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');
  });
})();

Я не совсем уверен, но мне кажется, что 'protectDefault' довольно сильно усложнен, но этот должен работать нормально.

0 голосов
/ 07 декабря 2018 
    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>
...