Question

我有一组DIV，我希望能够在鼠标点击鼠标时识别它们。以下是我目前使用的HTML代码的缩减：

<div id="1" style="position: absolute; top: 0px; left: 0;"></div>
<div id="10" style="position: absolute; top: 0px; left: 0;"></div>
<div id="11" style="position: absolute; top: 0px; left: 0;"></div>

<div style="position: absolute; top: 450px; left: 0;">
    <button onclick="sendAnswer()">Answer</button>
    <p id="demo"></p>
</div>

（目前）有24个这样的DIV，使用二进制表示法作为ID。

我添加了一个事件监听器：

document.addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello " + event.target.id;
});

所以，我得到了Hello弹出的单词，但没有点击我点击的DIV的ID。

我一直在其他地方探索建议，但无济于事。

为了澄清，每个二进制ID dIV都被分配了一个随机图像，我最终打算将其拖放到网格上。我已经把它们拖得可以了，但代码杂乱，笨拙和断断续续。我有另一个想法，但它要求我识别刚刚点击的元素。

Answer 1

您总是在侦听器回调中获取事件，您可以从那里获取id

＆＃13;

document.addEventListener("click", function(event){
    document.getElementById("demo").innerHTML = "Hello " + event.target.id;
});

＆＃13;

<div id="1" >1</div>
<div id="10" >2</div>
<div id="11" >3</div>

<div id="demo"></div>

＆＃13;

Answer 2

将您的Javascript更改为此

document.addEventListener("click", function(event){
alert( event.target.id);

}）;

Answer 3

试试这个

＆＃13;

window.onload=function(){
  document.querySelectorAll('div.foo').forEach(function(e){
   e.addEventListener("click", function(){
        document.getElementById("demo").innerHTML = "Hello " + this.id;
    });
   });
}

＆＃13;

 <div id="1" class="foo" style="position: absolute; top: 0px; left: 0;">1</div>
 <div id="10"  class="foo" style="position: absolute; top: 20px; left: 0;">2</div>
 <div id="11"  class="foo" style="position: absolute; top: 40px; left: 0;">3</div>
    
 <div style="position: absolute; top: 60px; left: 0;">
     
        <p id="demo"></p>
 </div>

＆＃13;

Answer 4

您可以直接在html上传递div的Id，如下所示：

Onclick="sendAnswer(this.id)"

js的功能如下：

function sendAnswer (var x){

     document.getElementById("demo").innerHTML = "Hello " + x;
}

使用Javascript获取ID

4 个答案: