为什么我的 jQuery 点击处理程序就像我点击了父元素一样？答案

【问题标题】：Why is my jQuery click handler acting as though I clicked on the parent element?为什么我的 jQuery 点击处理程序就像我点击了父元素一样？
【发布时间】：2022-01-04 19:04:53
【问题描述】：

我在父 div 中创建了很多子 div。所有 div 定位，父 div 是绝对的，子 div 是相对的。父 div z-index 为 400，子 div 为 500。

当我单击任何子 div 时，jQuery 会使用单击功能检测父 div。我不明白为什么这些代码不起作用。

所以我希望任何人都可以帮助我解决这个问题。

父 div ID：“#cardslayer”

子 div 类：“.cardinlayer”

-HTML：

<body>
<div id="cardslayer"></div>
</body>

-CSS：

#cardslayer {
    position: absolute;
    width: 960px;
    height: auto;
    top: 0;
    left: 0;
    z-index: 400;
    display: none;
}

.cardinlayer {
    width: 100px;
    height: 125px;
    margin: 10px;
    position: relative;
    z-index: 500;
    display: none;
}

-JQUERY：（以及一些带有 jquery 功能的 css 样式。）

  var hazakstr = "";
  var i = 0;
  

  $("#button").click(function(){
      hazakstr = "<center>";
      for(i=0; i<22; i++) {
        if(level_owner[i] == -1) {
            hazakstr = hazakstr + "<div class='cardinlayer' id='house" + i + "' style='background: url(../houses/" + i + ".png); background-size: 100px 125px; background-repeat: no-repeat;'></div>";
        }
      }
      hazakstr = hazakstr + "</center>";
      $("#cardslayer").css("display", "block");
      $("#cardslayer").html(hazakstr);
      $(".cardinlayer").css("display", "inline-block");
      i=((567 - $("#cardslayer").height()) / 2);
      $("#cardslayer").css("height", 567 - i + "px");
      $("#cardslayer").css("padding-top", i + "px");
  });

在循环结束时将 html 添加到 #cardslayer。像这样的代码：

HTML：

<div id="cardslayer" style="display: block; height: 507px; padding-top: 60px;">
    <center>
        <div class="cardinlayer" id="house0" style="background: url(&quot;../houses/0.png&quot;) 0% 0% / 100px 125px no-repeat; display: inline-block;"></div>
        <div class="cardinlayer" id="house1" style="background: url(&quot;../houses/1.png&quot;) 0% 0% / 100px 125px no-repeat; display: inline-block;"></div>
        .
        .
        .
        .
        <div class="cardinlayer" id="house21" style="background: url(&quot;../houses/21.png&quot;) 0% 0% / 100px 125px no-repeat; display: inline-block;"></div>
    </center>
</div>

毕竟，我为.cardinlayer 创建了点击函数。而且它不工作。

$(".cardinlayer").click(function(){
      alert("Cardinlayer");
  });

我为 .cardinlayer 尝试了这个点击功能

$("div").click(function(){
    alert($(this).attr("id"));
});

当我点击一个 .cardinlayer 时，返回值为#cardslayer，而不是#house1 或任何#house。

#cardslayer 是父级，.cardinlayer(s) 是子级。

问题图片： https://i.imgur.com/DjWcIKK.jpg

红色是父母，蓝色是孩子。所以当我点击任何卡片时 jquery 都没有被检测到。 Jquery 认为我点击了褪色的黑色背景。（父母）。

我希望任何人都可以帮助我。祝你有美好的一天，谢谢。

【问题讨论】：

考虑Event Delegation - 在#cardslayer 上收集click 事件并使用event.target 来确定点击了什么。

标签： javascript html jquery css onclick

【解决方案1】：

click 事件有修饰符，例如 stopPropagation 或 preventDefault。（更多信息：Event on MDN）

查看实际效果：

let hazakstr = "";

const cardHtml = ({ i }) => {
  return `
    <div
      id="house${i}"
      class="cardinlayer"
      data-idx="${i}"
    >
      HOUSE ${i}
    </div>
  `
}


jQuery("#button").on('click', function() {
  for (let i = 0; i < 22; i++) {
    hazakstr += cardHtml({ i })
  }
  $("#cardslayer").html(hazakstr);
});

jQuery("#cardslayer").on('click', '.cardinlayer', function(e) {
  e.stopPropagation() // this stops the event from propagation
  const { idx } = $(this).data()
  alert(`Clicked house card: ${idx}`)
})

.container {
  position: relative;
}

#cardslayer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.cardinlayer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 125px;
  padding: 8px 16px;
  background-color: rgba(255, 0, 0, 0.3);
  -webkit-transition: background-color 0.25s ease-out;
  -moz-transition: background-color 0.25s ease-out;
  -o-transition: background-color 0.25s ease-out;
  transition: background-color 0.25s ease-out;
  cursor: pointer;
}

.cardinlayer:hover {
  background-color: rgba(255, 0, 0, 0.9)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">CLICK</button>
<div class="container">
  <div id="cardslayer"></div>
</div>

编辑/建议：

如果可能的话，我建议你不要惹jQuery。这是Vue 中的一些更新：

Vue.component('HouseCard', {
  props: ['idx'],
  methods: {
    onClick({ idx }) {
      alert(`Clicked house: ${ idx }`)
    },
  },
  template: `
    <div
      class="cardinlayer"
      @click.stop="() => onClick({ idx })"
    >
      HOUSE {{ idx }}
    </div>
  `
})

new Vue({
  el: "#app",
  data() {
    return {
      houses: [],
    }
  },
  methods: {
    addHouse(houses) {
      return [...houses, houses.length]
    },
    add1House() {
      this.houses = this.addHouse(this.houses)
    },
    add22Houses() {
      let ret = this.houses
      for (let i = 0; i < 22; i++) {
        ret = this.addHouse(ret)
      }
      this.houses = ret
    }
  },
  template: `
    <div>
      <button @click="add1House">ADD 1 HOUSE</button>
      <button @click="add22Houses">ADD 22 HOUSES</button>
      <br />
      <div
        class="container"
      >
        <div
          id="cardslayer"
        >
          <house-card
            v-for="(house, idx) in houses"
            :key="idx"
            :idx="idx"
          ></house-card>
        </div>
      </div>
    </div>
  `
})

.container {
  position: relative;
}

#cardslayer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.cardinlayer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 125px;
  padding: 8px 16px;
  background-color: rgba(255, 0, 0, 0.3);
  -webkit-transition: background-color 0.25s ease-out;
  -moz-transition: background-color 0.25s ease-out;
  -o-transition: background-color 0.25s ease-out;
  transition: background-color 0.25s ease-out;
  cursor: pointer;
}

.cardinlayer:hover {
  background-color: rgba(255, 0, 0, 0.9)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

或React 解决方案：

const { useState } = React

const HouseCard = ({ idx }) => {
  const handleClick = () => {
    alert(`House clicked: ${idx}`)
  }
  return (
    <div class="cardinlayer" onClick={handleClick}>
      HOUSE { idx }
    </div>
  )
}

const App = () => {
  const [houses, setHouses] = useState([])
  
  const addHouse = (houses) => [...houses, houses.length]
  const add1House = () => setHouses((prev) => addHouse(prev))
  const add22Houses = () => {
    for(let i = 0; i < 22; i++) {
      setHouses((prev) => addHouse(prev))
    }
  }
  
  return (
    <div>
      <button onClick={add1House}>ADD 1 HOUSE</button>
      <button onClick={add22Houses}>ADD 22 HOUSES</button>
      <div class="container">
        <div id="cardslayer">
          {
            houses.map((_, idx) => <HouseCard idx={idx} />)
          }
        </div>
      </div>
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

.container {
  position: relative;
}

#cardslayer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.cardinlayer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 125px;
  padding: 8px 16px;
  background-color: rgba(255, 0, 0, 0.3);
  -webkit-transition: background-color 0.25s ease-out;
  -moz-transition: background-color 0.25s ease-out;
  -o-transition: background-color 0.25s ease-out;
  transition: background-color 0.25s ease-out;
  cursor: pointer;
}

.cardinlayer:hover {
  background-color: rgba(255, 0, 0, 0.9)
}

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

<div id="root"></div>

【讨论】：