Не работает javascript — preventDefault как сделать?

Question

[Boooom]

Всем привет

Не могу запретить переход по ссылке через preventDefault, нужно для мобильной версии сайта

Проект: https://codepen.io/pavel-lipatkin/pen/aXJqPN

Написал скрипт, который как бы должен определить по id кнопку и запретить, но не работает. Быть может вы предложите лучше вариант реализации

function navFunction(id) {
    var elements = document.querySelectorAll(".noLink1");
    for (var i = 0; i < elements.length; i++) {
        (elements[i].id === id).addEventListener('click', function(e) {
            e.preventDefault();
            alert("ok");
        }, false);
    }
}

<li class="dropdown sort-2">
                        <a href="/template/category/" onclick="navFunction('nav-id-2')" class="dropbtn noLink1">Название категории (не должен перейти по ссылке)
                            <i class="fa fa-caret-down"></i>
                        </a>
                        <ul class="dropdown-menu" id="nav-id-2">
                            <li><a href="">Подкатегория</a></li>
                            <li><a href="">Длинное название подкатегории</a></li>
                            <li><a href="">Название подкатегории</a></li>
                        </ul>
                    </li>

Подскажите в чем может быть проблема?

Спасибо

Answer 1

[DanKud]

Во-первых вы хотите повесить событие click на элемент только после клика onclick на нем, а не при созданием документа.
Во-вторых вы пытаетесь повесить событие на условие, результатом которого будет не объект, а значение true или false
Да и не совсем понятно для чего вообще вы пытаетесь поставить условие elements[i].id === id. Нужно просто прописать не внутри функции, а в основной части скрипта:

var elements = document.querySelectorAll(".noLink1");
for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', function(e) {
        e.preventDefault();
        alert("ok");
    }, false);
}

Comments

[Boooom]

Друг, спасибо, действительно работает!

Подскажи только как убрать несколько alert, а то он каждый раз навешивает их при клике и в итоге по 5 штук alert выводит

[DanKud]

Куда вы добавили этот код? Опять внутрь функции navFunction? Его нужно вынести из функции и не будет никаких дополнительных алертов.

[Boooom]

DanKud,

У меня там еще один скрипт, которым я открываю менюшку

function navFunction(id) {
    var elements = document.querySelectorAll(".noLink1");
    for (var i = 0; i < elements.length; i++) {
        elements[i].addEventListener('click', function(e) {
            e.preventDefault();
            alert("ok");
        }, false);
    }

    var dropdowns = document.querySelectorAll(".resp .dropdown-menu");
    for (var i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (dropdowns[i].id === id) {
            openDropdown.classList.toggle('show');
        }
        else {
            openDropdown.classList.remove('show');
        }
    }
}

[DanKud]

https://codepen.io/anon/pen/MLmvpo

[Boooom]

DanKud, на одну кнопку 2 функции

[Boooom]

DanKud, друг, спасибо тебе, а то второй день сижу колдую)))

[DanKud]

Посмотрите Codepen, который я вам дал. В данном случае события нужно вешать не внутри функции, а при загрузке страницы. У вас же получается так, что каждый раз при клике на кнопку вы заново вешаете событие. По-этому когда вы в следующий раз нажимаете кнопку вы добавляете на один алерт больше, чем в прошлый раз. Отсюда и вылазит количество алертов равное количеству кликов по кнопке до этого. Событие нужно повесить только один раз при загрузки страницы и все, по-этому его нужно вынести за пределы вашей функции.

[Boooom]

DanKud, а есть какой нибудь вариант вешать эту же самую функцию при нажатии на кнопку? Может также через onclick?

[Boooom]

DanKud, это делается для менюшки, где для работы кнопок на мобильной версии требуется наличие определенного класса, который появится только при нажатии на кнопку

До:


После:


И если делать сразу при загрузки странице, то данная функция будет выполняться и на полной версии сайта (а это собственно не нужно), поэтому и пытался как то прикрутить 2 действия на одну функцию

[DanKud]

А для чего? Чем вас не устраивает то, что событие вешается сразу же при загрузке страницы? То что вы хотите конечно можно сделать, просто отменять событие с помощью removeEventListener каждый раз и вешать заново, но зачем это делать?

[DanKud]

Класс resp у вас присваивается динамически скриптом или он доступен сразу же при загрузке страницы мобильной версии?

Answer 2

[Rsa97]

(elements[i].id === id).addEventListener(...)
А зачем навешивать слушатель на логическое значение? Результат операции === либо true, либо false.