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

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;
}

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

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

Подписаться 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 подписчик
- 2 часа назад
- 32 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как сделать ширину блока по ширине контента?
- 1 подписчик
- 8 часов назад
- 45 просмотров
1

ответ
JavaScript

Простой
Как найти и сгруппировать элементы с одинаковым классом?
- 1 подписчик
- вчера
- 79 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как скроллить определенный блок Div?
- 1 подписчик
- вчера
- 134 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как написать текст на окружности и посчитать точки?
- 1 подписчик
- 26 дек.
- 96 просмотров
0

ответов
JavaScript

Средний
Как остановить весь скрипт js при выполнении условия tampermonkey?
- 1 подписчик
- 26 дек.
- 82 просмотра
2

ответа
JavaScript

Средний
.stopPropagation() на самом деле не останавливает распространение события?
- 1 подписчик
- 26 дек.
- 124 просмотра
1

ответ
JavaScript

Простой
Нужно ли проверять импорт модуля js на повторную загрузку?
- 1 подписчик
- 26 дек.
- 59 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему у меня не может найти URL_TO_BOT?
- 1 подписчик
- 25 дек.
- 57 просмотров
0

ответов
JavaScript

+3 ещё

Простой
Как отключить swiper-bundle.min.css?
- 1 подписчик
- 25 дек.
- 64 просмотра
2

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

Бэкэнд-разработчик JavaScript

Wanted. • Москва

от 250 000 до 400 000 ₽

Исправить ошибки в консольном интерфейсе с применением C# и NET

28 дек. 2024, в 22:21

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

Сделать бота

28 дек. 2024, в 21:56

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

Доработка Битрикс

28 дек. 2024, в 18:50

1200 руб./в час

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 комментария

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

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

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

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