Как перехватить переход по ссылки и повесить функцию на неё?

Question

[Axel030392]

тут много подобных вопросов, но на этот все же ответа не нашел. Есть див в который подгружается iframe (c одного домена). В этом же диве есть ссылки двух типов. Один тип должен работать как работает ( это javascript:void(0);) вторые переходят на другие страницы, и они не должны переходить, а должны загружать контент в том же диве. Вторые таже бывают нескольких типов, и разделяются по pathname, которые состоят тоже из двух частей категория и униальная страница поэтому в коде делаю сплит. Я хочу что бы при нажатие вторых типов ссылки (с любыми pathname) останавливался переход по ссылки, и далее том же основном диве, загружался нужный блок со страницы, на которую ведет ссылка.

есть черновой пример реализации, которая вообще не работает

<div id="newprojects" class="nw-projects"></div>
<script>
jQuery(document).ready(function($){
    $("#newprojects").load("/candidate .dev-map-class-changer");        
    var box = document.getElementById('newprojects');
        var links = box.getElementsByTagName('a');
        
        for(var i = 0, l = links.length; i < l; i++)
          links[i].onclick = function(){
            return false;
          };
        
        box.onclick = function(event){
        
          if(!event) event = window.event;
          var target = event.target || event.srcElement;
        
          if(target.tagName.search(/a/i) === -1) return;
        var ddf = target.href.pathname;
        var ddff =  ddf.split('/')[1];
         if (ddff === "candidate") { $("#newprojects").load("/адрес .dev-map-class-changer");}
            if (ddf === "void(0);") {location = target.href; }
        }; });  
    </script>

Answer 1

[daedra93]

event.preventDefault() - при клике по ссылке не пробовали это добавить ?

Comments

[Axel030392]

ну я не сильно шарю в js? подскажите, куда конкретно это добавить нужно?

Answer 2

[Axel030392]

Всем спасибо, нашел ответ при помощи GPT, красиво и просто. Вот кому интересна это реализация.

<div id="newprojects" class="nw-projects">
    <!-- Ссылки -->
    <a href="javascript:void(0);">Ссылка 1</a>
    <a href="/category/page1">Ссылка на категорию 1</a>
    <a href="/category/page2">Ссылка на категорию 2</a>
    <a href="/category/page3">Ссылка на категорию 3</a>
    <!-- /Ссылки -->
</div>

<script>
jQuery(document).ready(function($){
    // Загрузка iframe в див
    $("#newprojects").load("/candidate .dev-map-class-changer");
    
    // Получение ссылок из дива
    var box = document.getElementById('newprojects');
    var links = box.getElementsByTagName('a');
    
    // Отмена перехода по ссылкам первого типа
    for(var i = 0, l = links.length; i < l; i++) {
        if (links[i].href === "javascript:void(0);") {
            links[i].onclick = function() {
                return false;
            };
        }
    }
    
    // Обработка кликов на ссылках второго типа
    box.onclick = function(event) {
        if (!event) event = window.event;
        var target = event.target || event.srcElement;
        
        // Проверка является ли элемент ссылкой
        if (target.tagName.search(/a/i) === -1) return;
        
        // Получение части pathname ссылки
        var pathname = target.pathname;
        var pathnameParts = pathname.split('/');
        var category = pathnameParts[1];
        
        // Если ссылка ведет на категорию, загрузить контент в див
        if (category === "category") {
            $("#newprojects").load(target.href + " .dev-map-class-changer");
            return false; // Остановить переход по ссылке
        }
    };
});
</script>