不需要的事件覆盖
Unwanted Event Override
这是我的代码(简化):
function FillTable ( oProfile_data ) {
var oTable = document.getElementById ( "table" );
for ( var key in oProfile_data ) {
var oRow = oTable.insertRow ( oTable.rows.length );
var oCell = oRow.insertCell ( 0 );
var oLink = document.createElement ( "a" );
oLink.href = "javascript:void(0)";
oLink.innerHTML = "Visit Homepage";
oLink.addEventListener ( "click",
function () {
var win = window.open ( oProfile_data [key]["url"], "_blank" );
win.focus();
}, false );
oCell.appendChild ( oLink );
}
}
问题是,每一行都有一个指向同一文档的链接,我不明白为什么!
我的临时解决方案是:
oLink.href = "javascript:void(0); var win = window.open ( '"" + oProfile_data [key]["url"] + "'", '"_blank'" ); win.focus();";
这很好用。我想这是一个压倒一切的问题,但我可能错了。
任何帮助都将不胜感激!
这是一个可以通过理解闭包来解决的问题。您的匿名函数(绑定到点击事件)直到用户点击链接才会被调用,并且当执行此行时:
var win = window.open ( oProfile_data [key]["url"], "_blank" );
key
的值将包含在FillTable
函数中。因此,它将保留函数结束时的值(即循环中的最后一个值)。
您必须为循环的每次迭代创建一个新的闭包。类似于:
oLink.addEventListener ("click",
(function (k) {
return function () {
var win = window.open ( oProfile_data [k]["url"], "_blank" );
win.focus();
}
}
)(key), false);
上面,我们创建了一个函数,返回一个打开窗口的函数。然后,我们将key
的值传递给该函数,从而创建一个新的闭包。
相关文章:
- 只覆盖箭头键滚动事件
- 将添加一个相同类型的事件附加或覆盖以前添加的具有相同名称的事件
- 如何覆盖原型中的事件侦听器
- 覆盖单击事件不起作用
- 如何通过 JQuery ajaxSend 事件覆盖成功函数
- 如何使用 OnClick 事件更改结构 JS 的覆盖图像
- 如何覆盖jQuery所选元素的“click”事件
- 覆盖对话框悬停事件
- 创建关闭事件以从自定义覆盖发射
- 如何覆盖jQuery-ui-sortable的拖动事件
- 将事件处理程序放在HTML按钮上,而不覆盖其默认功能
- 如何在更改的事件处理程序中忽略Polymer元素上默认属性的初始覆盖
- 谷歌地图USGSO在同一级别标记上覆盖点击事件多响应
- jQuery是否覆盖事件侦听器
- jQuery UI widget - 如何调用覆盖事件处理程序
- 我可以临时覆盖事件侦听器吗
- 覆盖事件属性
- 禁用JavaScript或Jquery全屏覆盖事件
- Dojo 如何覆盖事件处理程序
- 覆盖事件处理程序中的返回值