如何获取单击的元素？

Question

我的html中有一个简单的div如下：

<div id="myDiv">
....

</div>

我还在 window.click上设置了onlick事件，如下所示：

window.onclick = function()
{
    // do something
 }  

所以，如果我点击div中的任何地方，我怎么才能发现这个点击是在“myDiv”中进行的

注意：我无法在div上添加click事件，它是从jqgrid随机生成的

Answer 1

$(document).on("click","#myDiv", function (event) {
     alert(event.target.id);
});

Answer 2

从函数中获取事件： window.onclick = function(event)然后在函数内部，你可以将它用作event.target ：

window.onclick = function(event)
{
    alert(event.target);
}

Answer 3

这是使用addEventListener的示例 - 不使用jQuery

document.getElementById('myDiv').addEventListener('click',function(e){
    // this div has been clicked
    console.log('this div has been clicked');
});

UPDATE

这是动态创建元素的非jQuery解决方案

document.addEventListener('click',function(e){
    if( e.target.id == 'myDiv' )
    {
        // this div has been clicked
        console.log('this div has been clicked');
    }
});

Answer 4

我纯粹是为了澄清与@Nishit Maheta就我对他的回答进行投票的讨论。

这个问题的目的就是这个。 “我希望知道何时点击动态添加的div”。 您看到动态添加的那一刻认为委托事件！ :)

由于这个问题允许使用jQuery， 因此@erkaner的答案接近理想情况。 我只想解释为什么它是适当的解决方案 。

$(document).on("click","#myDiv", function (event) {
     // Do something
});

说明：

• 这使用了jQuery 委托的事件处理程序 。 事件处理被“委托”给预期目标的不变的祖先，因此命名。
• 在这种情况下，选择的祖先是document 。
• 您应该使用最接近目标的不变祖先，但如果没有其他更接近/方便，则document是最佳默认值。
• 警告：不要将body用于委派事件，因为它有一个错误（样式可能导致它不会出现冒泡的鼠标事件）。
• 事件（在这种情况下click ）冒泡到处理程序元素（即文档）。
• 然后，jQuery选择器（在本例中为#myDiv ）仅应用于bubble-chain中的元素 。 这非常有效。
• 然后，提供的处理函数仅应用于导致事件的任何匹配元素。

所有这一切的结果是元素在事件时间之前不需要存在（当事件被注册时不需要存在）。

此外，因为委托通常用于鼠标事件 （而不是每秒50,000次），所以它与“原始”事件处理程序之间的速度差异可以忽略不计。 好处远远超过任何微不足道的速度差异。

关于其他onclick=答案

• 首先，使用单个window.onclick属性是一个坏主意，因为你停止使用它的任何其他东西（不是任何使用jQuery的人都应该使用它）。
• 其次，所有浏览器都不提供传递给onclick的事件参数（这应该足以阻止任何人使用它）。 有一些解决方法，但创建jQuery是为了避免浏览器的变通方法:)

笔记：

如果命名不在您的控制范围内，您只需要匹配的内容即可。 最糟糕的情况是，它可以像“匹配任何表格下的任何div”一样简单，但这取决于您的特定HTML和代码：

$(document).on("click","table div", function (event) {
     // Do something
});

这是一个实际的例子：

http://jsfiddle.net/TrueBlueAussie/eyo5Lnsy/

@Sashi Kant：如果您可以提供页面HTML输出的样本（例如从浏览器中保存），我将很乐意为您提供的任何变体提供:)

Answer 5

 var myDiv = document.getElementById('myDiv'); myDiv.style.cursor = 'pointer'; myDiv.onclick = function() { //DO SOMETHING }; 

Answer 6

开始了。

$('body').click(function(e) {      
  if (e.target.id == 'myDiv') {
    alert('My Div!!!!');
  }
});​

Answer 7

 $( "body" ).click(function( event ) { $( "#log" ).html( "clicked: " + event.target.nodeName ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="myDiv"> .... </div> <div id="log"></div> 

Answer 8

检查以下代码。 检查DEMO

使用event.target获取被点击的元素。

window.onclick = function(event)
{
  if(event.target.id == "myDiv"){
    alert("here")
  }else{
    alert('Body')
  }
 console.log(event.target.id)
}