时间戳

首页 > 解决方案 > JQuery Onclick event.target 返回错误的元素

javascript - JQuery Onclick event.target 返回错误的元素

问题描述

我正在尝试使用 class 打印我单击的目标的 id piece。这是JavaScript。

function attachClickHandlers() {
  $('.piece').click(function(event) {
    console.log(event.target.id)
  })
}

attachClickHandlers();

HTML：


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="full-board">
      <div id="pieces">
        <img src="assets/w_r.svg" id="w_r1" class="piece">
        <img src="assets/w_n.svg" id="w_n1" class="piece">
        <img src="assets/w_b.svg" id="w_b1" class="piece">
        <img src="assets/w_q.svg" id="w_q" class="piece">
        <img src="assets/w_k.svg" id="w_k" class="piece">
        <img src="assets/w_b.svg" id="w_b2" class="piece">
        <img src="assets/w_n.svg" id="w_n2" class="piece">
        <img src="assets/w_r.svg" id="w_r2" class="piece">

        <img src="assets/w_p.svg" id="w_p1" class="piece">
        <img src="assets/w_p.svg" id="w_p2" class="piece">
        <img src="assets/w_p.svg" id="w_p3" class="piece">
        <img src="assets/w_p.svg" id="w_p4" class="piece">
        <img src="assets/w_p.svg" id="w_p5" class="piece">
        <img src="assets/w_p.svg" id="w_p6" class="piece">
        <img src="assets/w_p.svg" id="w_p7" class="piece">
        <img src="assets/w_p.svg" id="w_p8" class="piece">

        <img src="assets/b_r.svg" id="b_r1" class="piece">
        <img src="assets/b_n.svg" id="b_n1" class="piece">
        <img src="assets/b_b.svg" id="b_b1" class="piece">
        <img src="assets/b_q.svg" id="b_q" class="piece">
        <img src="assets/b_k.svg" id="b_k" class="piece">
        <img src="assets/b_b.svg" id="b_b2" class="piece">
        <img src="assets/b_n.svg" id="b_n2" class="piece">
        <img src="assets/b_r.svg" id="b_r2" class="piece">

        <img src="assets/b_p.svg" id="b_p1" class="piece">
        <img src="assets/b_p.svg" id="b_p2" class="piece">
        <img src="assets/b_p.svg" id="b_p3" class="piece">
        <img src="assets/b_p.svg" id="b_p4" class="piece">
        <img src="assets/b_p.svg" id="b_p5" class="piece">
        <img src="assets/b_p.svg" id="b_p6" class="piece">
        <img src="assets/b_p.svg" id="b_p7" class="piece">
        <img src="assets/b_p.svg" id="b_p8" class="piece">
      </div>

网站在我的浏览器上的样子 但是，如果我单击第一行（棋子）上的任何白色棋子，它会打印w_p8，如果我单击第二行上的任何白色棋子，它会打印w_r2.

我究竟做错了什么？

编辑：它适用于大多数尝试过它的人，所以它可能是我的代码中的其他内容。抱歉，我一开始没有包括它，我认为其他任何东西都不会产生太大影响，我设法在 JSFiddle 上重现了这个问题：https ://jsfiddle.net/chy86fbq/

标签： javascriptjqueryonclicklistener

解决方案

你说：

我正在尝试使用名称还包含“w”的类“piece”打印我单击的目标的 id。

可能不是你的意思的名字id。所以你需要检查id是否includes w然后记录它。另请注意，您错过了结束div标签。

更新

根据您与共享整个代码（https://jsfiddle.net/chy86fbq/）相关的评论，您正在使用position = 'absolute'并且不设置leftand top。而不是设置paddingLeft和paddingTop你需要设置left和top类piece。

   console.clear();
   attachClickHandlers();
        function attachClickHandlers() {
            $('.piece').click(function (event) {
                if (event.target.id.includes("w"))
                    console.log(event.target.id)
            })
        }
 img {
            display: inline-block;
            width: 50px;
            height: 50px;
            outline: 1px solid black;
        }
       <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <div id="full-board">
        <div id="pieces">
            <img src="assets/w_r.svg" alt="w_r1" id="w_r1" class="piece">
            <img src="assets/w_n.svg" alt="w_n1" id="w_n1" class="piece">
            <img src="assets/w_b.svg" alt="w_b1" id="w_b1" class="piece">
            <img src="assets/w_q.svg" alt="w_q" id="w_q" class="piece">
            <img src="assets/w_k.svg" alt="w_k" id="w_k" class="piece">
            <img src="assets/w_b.svg" alt="w_b2" id="w_b2" class="piece">
            <img src="assets/w_n.svg" alt="w_n2" id="w_n2" class="piece">
            <img src="assets/w_r.svg" alt="w_r2" id="w_r2" class="piece">

            <img src="assets/w_p.svg" alt="w_p1" id="w_p1" class="piece">
            <img src="assets/w_p.svg" alt="w_p2" id="w_p2" class="piece">
            <img src="assets/w_p.svg" alt="w_p3" id="w_p3" class="piece">
            <img src="assets/w_p.svg" alt="w_p4" id="w_p4" class="piece">
            <img src="assets/w_p.svg" alt="w_p5" id="w_p5" class="piece">
            <img src="assets/w_p.svg" alt="w_p6" id="w_p6" class="piece">
            <img src="assets/w_p.svg" alt="w_p7" id="w_p7" class="piece">
            <img src="assets/w_p.svg" alt="w_p8" id="w_p8" class="piece">

            <img src="assets/b_r.svg" alt="b_r1" id="b_r1" class="piece">
            <img src="assets/b_n.svg" alt="b_n1" id="b_n1" class="piece">
            <img src="assets/b_b.svg" alt="b_b1" id="b_b1" class="piece">
            <img src="assets/b_q.svg" alt="b_q" id="b_q" class="piece">
            <img src="assets/b_k.svg" alt="b_k" id="b_k" class="piece">
            <img src="assets/b_b.svg" alt="b_b2" id="b_b2" class="piece">
            <img src="assets/b_n.svg" alt="b_n2" id="b_n2" class="piece">
            <img src="assets/b_r.svg" alt="b_r2" id="b_r2" class="piece">

            <img src="assets/b_p.svg" alt="b_p1" id="b_p1" class="piece">
            <img src="assets/b_p.svg" alt="b_p2" id="b_p2" class="piece">
            <img src="assets/b_p.svg" alt="b_p3" id="b_p3" class="piece">
            <img src="assets/b_p.svg" alt="b_p4" id="b_p4" class="piece">
            <img src="assets/b_p.svg" alt="b_p5" id="b_p5" class="piece">
            <img src="assets/b_p.svg" alt="b_p6" id="b_p6" class="piece">
            <img src="assets/b_p.svg" alt="b_p7" id="b_p7" class="piece">
            <img src="assets/b_p.svg" alt="b_p8" id="b_p8" class="piece">
        </div>
    </div>

推荐阅读