HTML和Javascript-检测单击了哪个div框？

如果有多个div框对齐（不重叠），如何检测单击了哪个框

例如，以下是伪代码：

HTML:

<div id="box1" onClick="clicked()">Box 1</div>
<div id="box2" onClick="clicked()">Box 2</div>
<div id="box3" onclick="clicked()">Box 3</div>

我的主要问题是我不知道如何正确地编写if语句。我不知道如何获取您在JavaScript中单击的div的id。我在想这样的事情：

if (document.getElementById() = first)
     /*do stuff*/

我知道我可以通过使用三种不同的函数来解决这个问题，例如

clicked1（）

，

clicked2（）

，和

clicked3（）

，但我不希望有这么多函数

非常感谢您的帮助，谢谢

您可以使用内联事件处理程序实现这一点，但最好将绑定代码移动到实际脚本中。您仍然可以使用一个函数，只需将其应用于每个元素

单击处理程序将接收一个事件对象，该对象提供有关单击的信息。其中一部分是

.target

属性，它将为您提供单击事件的源，即您单击的元素

单击的函数（e）{
var目标=e.target；
console.log（target.id）；
}
document.querySelector（“#box1”）.addEventListener（'click'，clicked）；
document.querySelector（“#box2”）.addEventListener（'click'，clicked）；
document.querySelector（“#box3”）.addEventListener（'click'，clicked）
.box{
浮动：左；
宽度：100px；
高度：100px；
右边距：2px；
背景色：#000；
颜色：#EEE；
}
框1
方框2
框3
您可以使用内联事件处理程序实现这一点，但最好将绑定代码移动到实际脚本中。您仍然可以使用一个函数，只需将其应用于每个元素

单击处理程序将接收一个事件对象，该对象提供有关单击的信息。其中一部分是
.target
属性，它将为您提供单击事件的源，即您单击的元素


单击的函数（e）{
var目标=e.target；
console.log（target.id）；
}
document.querySelector（“#box1”）.addEventListener（'click'，clicked）；
document.querySelector（“#box2”）.addEventListener（'click'，clicked）；
document.querySelector（“#box3”）.addEventListener（'click'，clicked）
.box{
浮动：左；
宽度：100px；
高度：100px；
右边距：2px；
背景色：#000；
颜色：#EEE；
}
框1
方框2
框3
纯Javascript在
事件
对象中有一个内置的
目标
。这基本上与
getElementById
相反，它基本上是
getIdByElement
（尽管此方法不存在）。要访问它，您只需将HTML从
onClick=“clicked（）”
编辑为
onClick=“clicked（event）”
，并将
clicked
函数更改为类似以下代码：

function clicked(event) {
  var id = event.target.id,
      first = 'box1',
      second = 'box2',
      third = 'box3';
  if(id === first) {
    ...
  } else if(id === second) {
    ...
  } else if(id === third) {
    ...
  }
}

为了解释为什么这样做，当启动JavaScript时，您会得到一个关于它的对象，它如下所示：

这是为了让你能得到关于发生了什么的某些细节。在本例中，您需要目标id。这适用于页面上的所有div。如果您想缩短代码，您也可以改为传入并执行
this.id
。例如：

function clicked(reference) { //pass in this instead of event
  let id = reference.id;
  ...
}

以下是一个工作中的it示例：


单击的函数（事件）{
设p=document.getElementById（'clicked-item'）
p、 textContent=event.target.id+“单击”；
}
框1
方框2
方框3
没有单击的
纯Javascript在
事件
对象中具有内置的
目标。这基本上与
getElementById
相反，它基本上是
getIdByElement
（尽管此方法不存在）。要访问它，您只需将HTML从
onClick=“clicked（）”
编辑为
onClick=“clicked（event）”
，并将
clicked
函数更改为类似以下代码：

function clicked(event) {
  var id = event.target.id,
      first = 'box1',
      second = 'box2',
      third = 'box3';
  if(id === first) {
    ...
  } else if(id === second) {
    ...
  } else if(id === third) {
    ...
  }
}

为了解释为什么这样做，当启动JavaScript时，您会得到一个关于它的对象，它如下所示：

这是为了让你能得到关于发生了什么的某些细节。在本例中，您需要目标id。这适用于页面上的所有div。如果您想缩短代码，您也可以改为传入并执行
this.id
。例如：

function clicked(reference) { //pass in this instead of event
  let id = reference.id;
  ...
}

以下是一个工作中的it示例：


单击的函数（事件）{
设p=document.getElementById（'clicked-item'）
p、 textContent=event.target.id+“单击”；
}
框1
方框2
方框3
none clicked
通过添加
clicked（this）
它选择您单击的div并返回该特定div的数据

<div id="box1" onClick="clicked(this)">Box 1</div>
<div id="box2" onClick="clicked(this)">Box 2</div>
<div id="box3" onclick="clicked(this)">Box 3</div>

通过添加
clicked（this）
它选择您单击的div并返回该特定div的数据

<div id="box1" onClick="clicked(this)">Box 1</div>
<div id="box2" onClick="clicked(this)">Box 2</div>
<div id="box3" onclick="clicked(this)">Box 3</div>

您正在使用jQuery吗？
event.target.id
？提示：处理程序可以接受参数。在第一个参数中，您将找到所需的内容。将
onclick=“clicked（）”
更改为
onclick=“clicked（this）”
。然后，将参数添加到函数中：
function clicked（e）{…
。最后，您可以通过在函数中执行
var myId=e.id
来获取id。@FernandoFradegrada-恐怕这是一条很糟糕的建议。是否使用jQuery？
event.target.id
？提示：处理程序可以接受参数。在第一个参数中，您将找到您需要的内容。更改
onclick=“click（）”
到
onclick=“clicked（this）”
。然后，将参数添加到函数中：
函数已单击（e）{…
。最后，您可以通过在函数中执行
var myId=e.id
来获取id。@FernandoFradegrada-恐怕这是一条很糟糕的建议。为什么不是一条？OP在他的问题中特别提到了一条。您是对的，我的错。这也是另一种方法，在我看来更好。为什么不是一条？OP特别是tal在他的问题中有一个问题让我感到困惑。你是对的，我的错。这也是另一种方式，我觉得更好