Установка приоритета щелчка для div с href - PullRequest
Новая
       37

Установка приоритета щелчка для div с href

0 голосов
/ 01 мая 2018

Я очень новичок в javascript, я пытаюсь использовать .glyphicon-remove, чтобы закрыть созданную мной закладку. Однако в этом всплывающем окне с закладками есть ссылка href, и каждый раз, когда я нажимаю на .glyphicon-remove, всплывающее окно исчезает, и меня перенаправляют на ссылку href. Я хочу, чтобы меня можно было перенаправить на ссылку только в том случае, если событие клика отсутствует на .glyphicon-remove. При нажатии .glyphicon-remove я просто хочу, чтобы закладка исчезла и не перенаправила меня на соответствующую ссылку. У кого-нибудь есть какие-либо предложения по выполнению этой функции? 

function removeBookmark(event){

  if (!event.target.matches('.glyphicon-remove')) return;

  // find index of clicked item
  // looks inside parent of span i.e. the bookmark class for its data id
  const index = event.target.parentNode.dataset.id;

  // remove from bookmarks
  bookmarks.splice(index, 1);
  // fill the new list
  fillBookMarksList(bookmarks);
  // store new list back to local storage
  storeBookmarks(bookmarks);

}

и это фрагмент href 

<a href="${newBookMark.link}" class="bookmark" data-id="${i}">

и вот соответствующая часть HTML 

bookmark .glyphicon-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #EEE;
  transition: 0.3s ease color;
  cursor: pointer;
}

Ответы [ 2 ]

0 голосов
/ 01 мая 2018

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

 if (!event.target.classList.contains('glyphicon-remove')) 
   return;

 //prevent default click behaviour
 event.preventDefault();
 event.returnValue = false;

 // find index of clicked item
 // looks inside parent of span i.e. the bookmark class for its data id
 const index = event.target.parentNode.dataset.id;

 // remove from bookmarks
 bookmarks.splice(index, 1);
 // fill the new list
 fillBookMarksList(bookmarks);
 // store new list back to local storage
 storeBookmarks(bookmarks);

функция event.preventDefault() должна предотвращать обычное поведение при щелчке (при условии, что цель события имеет

0 голосов
/ 01 мая 2018

Попробуйте использовать метод event.preventDefault(), чтобы не запускать событие onclick ссылки по умолчанию. Более подробную информацию можно найти здесь preventDefault ()

...