div上的JavaScript点击事件

Posted 2023-05-09

【中文标题】div上的JavaScript点击事件

【英文标题】：JavaScript click event on div

【发布时间】：2017-04-23 02:47:59

【问题描述】：

我正在处理 javascript 项目，但在点击事件和检索有关点击的元素的正确信息时遇到问题。我对 JavaScript 比较陌生。

我正在处理的实际代码相当复杂，但我只发布了一段代码来说明我的问题。

function App()
this.name = "New App";


App.prototype.createDIV = function() 

  var h = "<div class='clickable' id='idToShow'><div class='name' id='notToShow'>" + this.name + "</div></div>";

  $('#content').html(h);


App.prototype.showID = function(e) 
  if (e.target.id == 'idToShow') 
    alert(this.name);  // this doesn't display, because incorrect ID is retrieved
  


$(document).ready(function() 
  var newApp = new App();

  $("input#btn").click(newApp.createDIV.bind(newApp));
  $("div").on("click", ".clickable", newApp.showID.bind(newApp));
);

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<div id="content"></div>
<input type="button" id="btn" value="CLICK">

我在应用程序中有一个包含多个原型的对象。在文档加载时，对象被构造，事件被附加到元素并绑定到对象。单击该按钮，将动态创建一组新的 div 结果。

现在这就是我开始出错的地方。我使用 CLICKABLE 类将事件附加到 div，我想检索该特定 DIV 元素的 id (id='idToShow');但是我一直在检索以下 DIV 的 id (id='notToShow')。

我可能不完全理解为什么会发生这种情况，以及为了获得正确的 ID 应该采取哪些措施来防止这种情况发生。

【问题讨论】：

如果 createDIV 可以执行多次，看起来可以，因为它是一个事件处理程序，你不能像现在这样使用你的 id。 ID 在页面上必须是唯一的。它们是唯一标识符。旁注，您有一个 元素。错字？

你在function App()之后缺少

感谢您注意到 并缺少 ，这是我的错字。这些 ID 在应用程序中实际上是唯一的（它们是 JSON 返回的项目的 ID），我只是用这些来说明我遇到的问题。下面的答案似乎对我很有效。

【参考方案1】：

尝试使用if (e.currentTarget.id == 'idToShow') 而不是if (e.target.id == 'idToShow')。

【讨论】：

谢谢你这对我来说很完美！为什么使用“e.target.id”返回嵌套div中最后一个孩子的id？