div上的JavaScript点击事件

Posted

技术标签:

【中文标题】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?

以上是关于div上的JavaScript点击事件的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript基础 事件

单个 div 上的多个 onclick 事件 - 更改 div 边框颜色 - javascript

Javascript检测div之外的点击事件

模拟反应元素上的点击事件

jquery在动画div上的多次点击事件

1000个div上的jQuery点击事件,优化方法?