返回已单击元素的子元素的jQuery click事件的event.target

Sara • 5 年前 • 1669 次点击

id s、我想当我点击超链接时 event.target.id 在事件处理程序内部将返回超链接因为事件绑定到超链接,但它返回图像 身份证件 event.target ?

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

另外,我知道可以通过改变 linkId 这个特定的 Page

嘘。我也知道JS有 Class 而不是我用过的基于函数的“类”。这与我的问题无关。

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/53842

文章 [ 2 ] | 最新文章 5 年前

• 1 楼

siddhant sankhe 5 年前

你用 event.currentTarget

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

希望这有帮助。

• 2 楼

CertainPerformance 5 年前

这个 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=“菜单”>
<a id=“home”><img id=“logo”src=“img/logo.png”alt=“logo”></a>
<li><a id=“about”>开放源码软件</a></li>
<li><a id=“concept”>Konsept</a></li>
<li><a id=“history”>数据</a></li>
</ul>
</分区>
<div id=“frontpage”></div>

登录后回复