Question

如果我排列了多个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>

JS：

function clicked(){
    var first="box1";
    var second="box2";
    var third="box3";

    if (the div id of what you clicked is equal to first)
       /*do something here*/
    if (the div id of what you clicked is equal to second)
       /*do something here*/
    etc
    etc
}

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

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

我知道我可以通过clicked1()，clicked2()和clicked3()这三个不同的功能来解决这个问题，但我宁愿不要这么多功能。

感谢任何帮助，谢谢。

Answer 1

纯 Javascript在target对象中有内置event。这基本上与getElementById相反，它基本上是getIdByElement（尽管这种方法不存在）。要访问它，您需要做的就是从onClick="clicked()"到onClick="clicked(event)"修改HTML，并将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 event被触发时，你得到一个关于它的对象，它看起来像这样：

这样您就可以获得有关所发生事件的某些细节。在这种情况下，您需要目标ID。这适用于selecting页面上的所有div。如果您想要缩短代码，也可以传入this代替this.id。如：

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

以下是工作中的一个例子：

＆＃13;

function clicked(event) {
  let p = document.getElementById('clicked-item')
  p.textContent = event.target.id + ' clicked';
}

＆＃13;

<div id="box1" onClick="clicked(event)">Box 1</div>
<div id="box2" onClick="clicked(event)">Box 2</div>
<div id="box3" onclick="clicked(event)">Box 3</div>
<p id="clicked-item">none clicked</p>

＆＃13;

将HTML和JS分开是个好主意（虽然不是100％必要）。因此，要删除每个元素上的onClick属性，请执行以下操作：

let selector = document.getElementsByTagName('div')
for(let element of selector) {
  element.addEventListener('click', function(event) {
    clicked(event);
  });
}

代码首先获取div getElementsByTagName的所有元素，但您也可以使用其他selectors。然后使用for loop我们遍历所有div，并添加一个onClick运行clicked的事件。

Answer 2

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

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

＆＃13;

function clicked(e) {
  var target = e.target;
  console.log(target.id);
}

document.querySelector('#box1').addEventListener('click', clicked);
document.querySelector('#box2').addEventListener('click', clicked);
document.querySelector('#box3').addEventListener('click', clicked);

＆＃13;

.box {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 2px;
  background-color: #000;
  color: #EEE;
}

＆＃13;

<div id="box1" class="box">Box 1</div>
<div id="box2" class="box">Box 2</div>
<div id="box3" class="box">Box 3</div>

＆＃13;

如果您决定使用内联绑定，最简单的方法是将this传递给您的函数调用。这将直接传递元素。

＆＃13;

function clicked(target) {
  console.log(target.id);
}

＆＃13;

.box {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 2px;
  background-color: #000;
  color: #EEE;
}

＆＃13;

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

＆＃13;

Answer 3

通过添加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>

通过添加div作为参数，它指定了您点击内部数据的div，并添加了一个switch语句来触发对每个div的特定响应。

function clicked(div) {
  if(div.id = 'box1') { 
    console.log('1');
  } else if(div.id = 'box2') {
    console.log('2');
  } else if(div.id = 'box3') {
    console.log('3');
  }
}

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

3 个答案: