Как определить, что нажата ссылка с определённым свойством?

Question

Александр Виноградов @ruchej

Конструктор мебели. Пишу макросы для К3-Мебель

JavaScript

Как определить, что нажата ссылка с определённым свойством?

Добрый день.
Не могу правильно написать код на JS, т.к. пока в нём ноль.
Надо определить, что нажата ссылка со свойством rel = "slide" и вызывать функцию.
В моём коде №1 функция вызывается сразу после загрузки страницы, а не по нажатию.
В №2 вроде правильно работает, но пришлось вызываемую функцию поместить в функцию, которая присваивается вызову. Почему так?
Так же в коде 1, когда передаю refs[i].onclick = slideshow(this); объект this не указывает на ссылку.
HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Тест модального окна</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div id="gallery">
        <a href="http://fkm-anons.ru/uploads/gallery/image/pre_04_12.jpg" rel="slide">
            <img src="http://fkm-anons.ru/uploads/gallery/image/list_04_12.jpg" alt="">
        </a>
        <a href="http://fkm-anons.ru/uploads/gallery/image/pre_dinamika_15072013.jpg" rel="slide">
            <img src="http://fkm-anons.ru/uploads/gallery/image/list_dinamika_15072013.jpg" alt="">
        </a>
        <a href="http://fkm-anons.ru/uploads/gallery/image/pre_04_4.jpg" rel="slide">
            <img src="http://fkm-anons.ru/uploads/gallery/image/list_04_4.jpg" alt="">
        </a>

    </div>


<button id="myBtn">Модальное окно</button>
<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Модальное окно</p>
    </div>
</div>


    <script src="testmodal.js"></script>
</body>
</html>

Код JS №1

var refs=document.getElementsByTagName("a")
for (var i=0, L=refs.length; i<L; i++) {
    refs[i].onclick = slideshow(this); 
}
 
function slideshow(link) {
        alert(link.href) 
        return false;
}

Код JS №2

var refs=document.getElementsByTagName("a")
for (var i=0, L=refs.length; i<L; i++) {
    refs[i].onclick = function() {
        slideshow(this); 
        return false;
    }
}
 
function slideshow(link) {
        alert(link.href) 
        return true;
}

Вопрос задан более трёх лет назад
655 просмотров

Комментировать

Подписаться 1 Оценить Комментировать

Решения вопроса 1

9 комментариев

Александр Виноградов @ruchej Автор вопроса

Как правильно подставить внешнюю функцию, которую вызвать, а вписанную функцию?
Сделал так, но ошибка:
slideLinks.forEach(link=>{
link.addEventListener('click', slideshow(evt))})

Написано более трёх лет назад
Stalker_RED @Stalker_RED

Ruchey: И вы снова вызываете функцию. Уберите скобочки.

Написано более трёх лет назад
Stalker_RED @Stalker_RED

Ruchey: link.addEventListener('click', slideshow)

Написано более трёх лет назад
Александр Виноградов @ruchej Автор вопроса

Stalker_RED: а как в вызываемую функцию передать вызвавший объект, тогда? И у вас в коде написано let link = evt.target, что даёт ссылку на объект img. Написал let link = evt.currentTarget, тогда получил объект "a" - ссылку

Написано более трёх лет назад
Stalker_RED @Stalker_RED
Ruchey: Да, вы правы, не обратил внимание что картинки внутри ссылок.
Туда в любом случае передается событие, и в большинстве случаев этого достаточно. Если нет, то можно обернуть всё в анонимную функцию

var mySuperImportantVariable = 42 document.addEventListener('click', function(evt){ // анонимная функция // Она видит переменную mySuperImportantVariable // и может вызвать что-то с параметрами console.log(mySuperImportantVariable, evt) })
Написано более трёх лет назад
Александр Виноградов @ruchej Автор вопроса
Stalker_RED: Получается, что всё равно надо писать функцию внутри функции, т.е. просто так написать нельзя: link.addEventListener('click', slideshow(evt) ; }
let linkNodes = document.querySelectorAll('a[rel=slide]') // находим все ссылки с rel=slide let slideLinks = [].slice.call(linkNodes) slideLinks.forEach(link=>{ link.addEventListener('click', function(evt){ // вешаем на каждую обработчик slideshow(evt) ; }) }) function slideshow(evt) { let link = evt.currentTarget ; console.log('clicked', link.href) ; return false; }

Вот только ещё задача, что бы не происходил переход по ссылки. Ставил return false; но все равно переход происходит.
link.addEventListener('click', function(evt){ // вешаем на каждую обработчик slideshow(evt) ; return false; })

А вообще, благодарю за помощь.
Написано более трёх лет назад
Stalker_RED @Stalker_RED

Ruchey: Вы так и не поняли, что когда вы пишете slideshow(evt) или slideshow() вы эту функцию вызываете? И то что вернула эта функция привязывается как обработчик.

Написано более трёх лет назад
Stalker_RED @Stalker_RED

Ruchey: Чтобы переход не происходил можно использовать event.preventDefault()

Написано более трёх лет назад
Александр Виноградов @ruchej Автор вопроса

Stalker_RED: Да, это сработало! Благодарю.

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

3 комментария

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 28 минут назад
- 11 просмотров
0

ответов
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- 6 часов назад
- 67 просмотров
0

ответов
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 20 часов назад
- 429 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- вчера
- 68 просмотров
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- вчера
- 40 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- вчера
- 34 просмотра
0

ответов
JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- 20 нояб.
- 145 просмотров
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- 20 нояб.
- 183 просмотра
5

ответов
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- 20 нояб.
- 86 просмотров
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- 20 нояб.
- 53 просмотра
0

ответов
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Создать сервер VPS через wireguard

24 нояб. 2024, в 00:04

5000 руб./за проект

Добавить интеграцию оплаты Telegram Payments 2.0 в Mini App (React)

23 нояб. 2024, в 23:30

3000 руб./за проект

Нарисовать инфографику в 3-х вариантах

23 нояб. 2024, в 23:03

1 руб./за проект

Answer 1 · 2017-02-17 18:45:28

На каждую ссылку свой бработчик

let linkNodes = document.querySelectorAll('a[rel=slide]') // находим все ссылки с rel=slide
let slideLinks = [].slice.call(linkNodes)
slideLinks.forEach(link=>{ 
    link.addEventListener('click', function(evt){ // вешаем на каждую обработчик
    let link = evt.target
    console.log('clicked', link.href)
  })
})

Или один на всех

document.addEventListener('click', function(evt){ // обработчик кликов привязан к document
    if (evt.target.rel == 'slide') { // если у кликнутого элемента есть rel=slide
  	let link = evt.target
    console.log('clicked', link.href)
  }
})

В ваших примерах код onclick = slideshow(this) вызывает функцию slideshow и ее значение уже присваивает.
Если написать onclick = slideshow; то получится то, что вы хотели.

Answer 2 · 2017-02-17 18:43:47

Иван @LiguidCool

Погуглите зачем нужен .on и .bind
И да, поймите в чем разница.

upd
Если не JQuery, то .addEventListener

Ответ написан более трёх лет назад

3 комментария

Как определить, что нажата ссылка с определённым свойством?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт