Отключить href в <a> тег

Question

Я разрабатываю плагин js, который люди могут вставлять на свои веб-сайты/wordpress. Js загружается с помощью ajax и модифицирует некоторые теги в DOM (используя определенный класс). Плагин изменяет эти теги для встраивания карты google с пользовательскими выводами, исходящими из API.

Я хотел бы использовать href для ссылки на URL-адрес API и плагин. Однако использование этого href означает, что нажатие на карту перенаправляет на api, что не то, что я хочу. Я мог бы использовать e.preventDefault(), но он отключает внутренние ссылки на карту google (контакты являются ссылками на подробную страницу места, эти ссылки загружаются из API).

Так что я хотел бы просто отключить контейнер плагинов href без отключения дочерних ссылок. Вот пример:

<a href="link-to-the-api" class="my-plugin-class disable-me"> 
    <div class="google-map"> 
     <a href="link-to-place1" class="dont-disable-me">place 1</a> 
     <a href="link-to-place2" class="dont-disable-me">place 2</a> 
     <a href="link-to-place3" class="dont-disable-me">place 3</a> 
    </div> 
</a> 
<script src="http://my-custom-map.com"></script> 

EDIT: Я забыл упомянуть, что я хотел бы использовать и HREF для улучшения SEO в API.

Спасибо!

Answer 1

Как указано DanFromGermany, вы не можете вложить <a> элементов.

Вместо этого, почему бы не использовать div? Поскольку вы, похоже, обрабатываете клики по нему через onclick, вы можете использовать div просто отлично. Затем вы можете проверить e.target || e.srcElement, чтобы увидеть, действительно ли щелчок был на одной из ссылок. Если это так, разрешите событие пройти. В противном случае обработайте его с помощью API.

Вам лучше всего использовать атрибут data-*, такой как data-api="link-to-the-api" и доступ к этому атрибуту.