Как взять картинку с абзаца внутри цикла абзацов и картинок

239

04 февраля 2018, 02:46

Есть массив абзацов и картинок текущей страницы. Все картинки внутри абзацов. Некоторые абзацы с картинками, а некоторые без. При клике по абзацу или картинке нужно запустить определённое действие в зависимости от того, по какому именно элементу кликнули.

<p>
<img src="image.jpg">Какой то текст. Какой то текст. Какой то текст. Какой то текст. 
Какой то текст. Какой то текст. Какой то текст. Какой то текст. Какой то текст. 
Какой то текст. Какой то текст. Какой то текст. Какой то текст.
</p>
<script>
var allParagraphsAndImages = document.querySelectorAll('p,img');
for(var i = 0; i < allParagraphsAndImages.length; i++) {
    allParagraphsAndImages[i].addEventListener('click', function() {
        if(this.tagName == 'IMG') {
            // сделать что то если клик по самой картинке
        }
        if(this.tagName == 'P') {
            // сделать что то если клик по абзацу за пределами картинки или по абзацу без картинки
        }
    });
}
</script>

Когда кликаю по абзацу, в котором нету картинки или же кликаю по абзацу с картинкой, но за пределами самой картинки, то все работает как и нужно. Но когда кликаю по картинке, то опять срабатывает действие, которое должно вызываться только при клике по абзацу.

Answer 1

Используйте event.target Вот пример:

document.querySelector('.container').addEventListener('click', (e)=> 
{ 
    console.log(e.currentTarget); // вернёт объект на котором висит обработчик (.container) 
    console.log(e.target); // вернёт объект по которому был сделан клик (.inner) 
    if (e.target.tagName === 'IMG') 
    { 
        // клик по картинке 
    } 
    else 
    { 
        // клик за пределами картинки, но в параграфе 
    } 
})

.container 
{ 
  width: 500px; 
  height: 500px; 
  background: red; 
} 
 
.inner 
{ 
  width: 100px; 
  height: 100px; 
  background: blue; 
}

<div class="container"> 
  <img class="inner" /> 
</div>

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Иконка расширения по ссылке Chrome

Использую такой код:

248

PHP

Пробелы в textarea при считывании с БД

При считывании информации с БД в textarea выводит отступы в начало строки

247

PHP

Подскажите как сделать так чтобы при определенном результате$question['display_number'] менялось слово Question в title

Тут нет ничего сложного, добавить проверку и записать в переменную результат

251

PHP

Смена позиции элемента массива php

Как из массива а сделать массив b наиболее эффективно?

226