event.target события jQuery click, возвращающего дочерний элемент элемента clicked - PullRequest
Новая
       11

event.target события jQuery click, возвращающего дочерний элемент элемента clicked

0 голосов
/ 30 января 2020

У меня есть jQuery событие нажатия на гиперссылку, содержащую изображение. И гиперссылка, и изображение имеют отдельные id с. Я ожидаю, что когда я нажму гиперссылку, код event.target.id внутри обработчика события вернет гиперссылку id, поскольку событие привязано к гиперссылке, но вернет изображение id. Это почему? Есть ли способ всегда сделать элемент, связанный с событием, event.target?

HTML: 

<div id="menuContainer">
    <ul id="menu">
        <li><a id="home"><img id="logo" src="img/logo.png" alt="logo"></a></li>
        <li><a id="about">Om oss</a></li>
        <li><a id="concept">Konsept</a></li>
        <li><a id="history">Data</a></li>
        <li><a id="store">Butikk</a></li>
    </ul>
</div>
<div id="frontpage"></div>
<div id="content"></div>

JS: 

function Page(pageId, linkId, file, backgroundImg, showPage){
    this.id = pageId;
    this.link = linkId;
    this.content = file;
    this.img = backgroundImg;
    this.show = showPage;

    this.loadPage = function() {
        if (this.show && $cont.is(":hidden")) $cont.show();
        else if (!this.show && $cont.is(":visible")) $cont.hide();
        if (this.content != "") $cont.load(this.content);
        else $cont.html("");
        $("#frontpage").css("backgroundImage", "url(img/" + this.img + ")");
    }
}

var pages = [];
var linkToPageId = {};

function addPage(linkId, file, backgroundImg, showPage = true) {
    var pageId = pages.length;
    var newPage = new Page(pageId, linkId, file, backgroundImg, showPage);
    pages.push(newPage);
    linkToPageId[linkId] = pageId;
}

addPage("home", "", "frontpage.jpg", false);

$("#menu a").click(function(event){
    console.log(event.target.id);
    pages[linkToPageId[event.target.id]].loadPage();
});

PS. Я знаю, что это можно исправить, если изменить linkId этого указанного объекта c Page на "lo go" вместо "home", но это как бы спагеттифицирует код. Я хотел бы увидеть, если есть какие-либо другие варианты в первую очередь.

PSS. Я также знаю, что JS имеет действительные Class es вместо "класса" на основе функций, который я использовал. Это не имеет отношения к моему вопросу.

Ответы [ 2 ]

5 голосов
/ 30 января 2020

event.target всегда будет элементом, отправившим событие. Если щелкнуть элемент внутри контейнера, то независимо от того, к какому элементу подключен слушатель, event.target будет элементом внутри контейнера.

Если вы хотите ссылку на элемент, слушатель является прикрепленный к, используйте this или event.currentTarget: 

$("#menu a").click(function() {
  console.log(this.id);
  // pages[linkToPageId[this.id]].loadPage();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menuContainer">
  <ul id="menu">
    <li>
      <a id="home"><img id="logo" src="img/logo.png" alt="logo"></a>
    </li>
    <li><a id="about">Om oss</a></li>
    <li><a id="concept">Konsept</a></li>
    <li><a id="history">Data</a></li>
    <li><a id="store">Butikk</a></li>
  </ul>
</div>
<div id="frontpage"></div>
<div id="content"></div>

$("#menu a").click(function() {
  console.log(event.currentTarget.id);
  // pages[linkToPageId[event.currentTarget]].loadPage();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menuContainer">
  <ul id="menu">
    <li>
      <a id="home"><img id="logo" src="img/logo.png" alt="logo"></a>
    </li>
    <li><a id="about">Om oss</a></li>
    <li><a id="concept">Konsept</a></li>
    <li><a id="history">Data</a></li>
    <li><a id="store">Butikk</a></li>
  </ul>
</div>
<div id="frontpage"></div>
<div id="content"></div>
2 голосов
/ 30 января 2020

вы используете event.currentTarget, который указывает на элемент, который вы прикрепили слушателя. Оно не меняется по мере появления события.

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

Надеюсь, это было полезно.

...