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

227
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>

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

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

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

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

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

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

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

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

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

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

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

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

 214