Можете ли вы настроить таргетинг на родительский элемент elements с помощью event.target?

87

Я пытаюсь изменить innerHTML моей страницы, чтобы он стал внутренним HTML элемента, на который я нажимаю, единственная проблема в том, что я хочу, чтобы он принимал весь элемент, например:

<section class="homeItem" data-detail="{"ID":"8","Name":"MacBook Air","Description":"2015 MacBook A…"20","Price":"899","Photo":"Images/Products/macbookAir.png"}"></section>

В то время как код, который я написал на javascript: 

function selectedProduct(event){
  target = event.target;
  element = document.getElementById("test");
  element.innerHTML = target.innerHTML;
}

будет нацелен на конкретный элемент, на который я нажимаю.

Чего я бы хотел добиться, так это того, что когда я нажимаю где-нибудь в <section>элементе, он будет принимать innerHTML всего элемента, а не конкретного, по которому я щелкнул.

Я предполагаю, что это как-то связано с выбором родительского элемента для того, по которому щелкнули, но я не уверен и не могу найти ничего в Интернете.

Если возможно, я бы хотел держаться подальше от JQuery

javascript html Адам
источник

Ответы:

163

Я думаю, что вам нужно использовать расширение event.currentTarget. Он будет содержать элемент, который на самом деле имеет прослушиватель событий. Итак, если у всего <section>есть прослушиватель событий, event.targetэто будет элемент, на <section>который щелкнули, то будет внутри event.currentTarget.

Иначе parentNode может быть то, что вы ищете.

ссылка на currentTarget
ссылка на parentNode

Donnywals
источник
5
Это сделал именно то, что я хотел, спасибо! Я приму ответ, как только таймер истечет.
Adam
2
спас меня день !, event.target - это наименьший тег у мыши, event.currentTarget - это тот, у которого событие запускается
datdinhquoc
1
Кажется нелогичным. Я бы подумал, что currentTargetдолжен представлять элемент, на который щелкнули, а targetдолжно быть то, на что было установлено событие.
Рэндалл Кодинг
это было именно то, что я искал, сначала спасибо, но у меня есть один вопрос: когда я регистрирую объект события в своей функции, currentTarget имеет значение null, но все же я могу получить идентификатор из моего атрибута набора данных, это зарегистрированное событие все тот же e.target?
a_m_dev
53

Чтобы использовать родительский элемент, используйте parentElement:

function selectedProduct(event){
  var target = event.target;
  var parent = target.parentElement;//parent of "target"
}
КДж Прайс
источник
2
Хотя это отвечает на вопрос OP, я думаю, что проблема OP должна быть решена с помощью currentTarget.
donnywals
Это дало мне родительский элемент верхнего уровня, который я не искал, в любом случае спасибо, я учту это при написании кода в будущем
Адам
10 
function getParent(event)
{
   return event.target.parentNode;
}

Примеры: 1. document.body.addEventListener("click", getParent, false);возвращает родительский элемент текущего элемента, по которому вы щелкнули.

  1. Если вы хотите использовать внутри какой-либо функции, передайте свое событие и вызовите функцию следующим образом: function yourFunction(event){ var parentElement = getParent(event); }
Абдул Алим
источник
8 
handleEvent(e) {
  const parent = e.currentTarget.parentNode;
}
Дэвид
источник
0 
$(document).on("click", function(event){
   var a = $(event.target).parents();
   var flaghide = true;
    a.each(function(index, val){
       if(val == $(container)[0]){
           flaghide = false;
        }
    });
    if(flaghide == true){
        //required code
    }
})
Шубхам Рунгта
источник
-1 
var _RemoveBtn = document.getElementsByClassName("remove");
for(var i=0 ;  i<_RemoveBtn.length ; i++){
    _RemoveBtn[i].addEventListener('click',sample,false);
}
function sample(event){
    console.log(event.currentTarget.parentNode);    
}
Ванга Киран Кумар Редди
источник