параметр "href" только при наведении мыши

#javascript

Вопрос:

У меня следующая проблема. У меня есть предварительно определенная href ссылка on, которую я не могу изменить или удалить в html. Мне нужно иметь href только onmouseover это. Поэтому я удалил его с:

document.getElementsByClassName("class")[0].removeAttribute("href");

Теперь мне нужно добавить это href обратно, но только onmouseover , поэтому по умолчанию href атрибута не будет, и onmouseover я включу его. Но это и подобные решения не работают:

document.getElementsByClassName("class")[0].onmouseover="this.href = 'urlHere';"

Есть ли какой-нибудь способ, как это сделать?

1. Почему вы хотите это сделать? Это та вещь, которая нарушает доступность.

2. Зачем вам пытаться добавить атрибут href при наведении курсора мыши? Если он присутствует, он ничего не делает, пока пользователь не нажмет на него.

Ответ №1:

Как я упоминал в своем комментарии, вам почти наверняка не следует этого делать, потому что это нарушит доступность. Если вы просто хотите изменить какой-то стиль, используйте CSS и :hover селектор псевдоклассов.

Однако, если у вас действительно был законный вариант использования для этого, лучшим способом сделать это было бы использование WeakMap:

 const links = document.querySelectorAll('.link-class-name')

const map = new WeakMap()

links.forEach(link => {
    map.set(link, link.href)

    link.removeAttribute('href')

    link.addEventListener('mouseenter', () => link.href = map.get(link))
    link.addEventListener('mouseleave', () => link.removeAttribute('href'))
})

WeakMap они хороши тем, что позволяют хранить произвольные метаданные о произвольных объектах таким образом, что их можно использовать для сбора мусора, когда в них больше нет необходимости. Это делает их идеальными для хранения и извлечения данных об узлах DOM.

1. Вот и все! Спасибо! Конечно, я знаю о проблемах с доступом в этом 🙂 но у меня есть применение для этого.

2. @MartinTK Вполне вероятно, что то, что вы считаете законным вариантом использования для этого, на самом деле было бы лучше обслуживаться каким-либо другим решением. Но поскольку вы не предоставили эту информацию, невозможно сказать.

Ответ №2:

Прикрепите прослушиватель событий к объекту document, при наведении курсора мыши на <a> тег затем добавьте ссылку, в противном случае, при наведении курсора мыши за его пределами удалите атрибут href.

Пример:

 const link = document.getElementsByClassName("class")[0];

link.removeAttribute("href");

document.addEventListener('mouseover', (e) => {
  if (e.target.tagName === 'A') {
    link.setAttribute('href', 'http://www.google.com');
  } else {
    link.removeAttribute('href');
  }

})

 <a class="class" href="http://www.google.com">Google site</a>