我一直在开发一个基本的 JavaScript 下拉菜单,使用 addEventListener 和 AttachEvent 来处理单击和鼠标功能。点击事件调用的函数 subOpen 使用 javascript“this”关键字来获取被点击元素的 id。
添加事件示例:
//add event listeners to menuitems
for (var i=0; i < menuitems.length; i++) {
if (menuitems[i].addEventListener) {
menuitems[i].addEventListener('click', subOpen, false);
menuitems[i].addEventListener('mouseout', closeTimer, false);
menuitems[i].addEventListener('mouseover', cancelTimer, false);
menuitems[i].addEventListener('selectstart', menucursorselect, false);
} else if (menuitems[i].attachEvent) {
menuitems[i].attachEvent('onclick', subOpen);
menuitems[i].attachEvent('onmouseout', closeTimer);
menuitems[i].attachEvent('onmouseover', cancelTimer);
menuitems[i].attachEvent('onselectstart', menucursorselect);
}
}
使用“this”关键字的 subOpen 函数示例:
function subOpen() {
cancelTimer(); //stops the close timer
if (submenudisplay) {
document.getElementById(submenudisplay).style.display = "none";
activeSubMenu = false;
}
var curMenuId = this.id;
var curSubMenuId = this.id + "submenu";
if (curSubMenuId) {
document.getElementById(curSubMenuId).style.display = "block";
activeSubMenu = true;
}
submenudisplay = curSubMenuId;
现在,除了早期版本的 Internet Explorer 之外,我测试过的所有浏览器都一切正常。对于旧版本的 IE,调试器将“this.id”标记为未定义,因此它不知道要打开哪个子菜单。我做了一些研究,发现旧版 IE 在附加事件时不会复制该函数,而是引用它,因此我无法使用“this”关键字捕获任何有用的数据。
我想知道是否可以使用不同的关键字或函数来完成与旧版本 IE 相同的操作。
可以找到我的测试代码的完整版本 here :
最佳答案
您可以使用一个函数来调用处理程序并手动设置 this
值。
这里我创建了一个 bindHandler
函数,它接收元素和处理程序,并返回一个新的处理程序,该新处理程序使用该元素作为 this
值调用原始处理程序。
它还将 window.event
对象传递给原始处理程序以获得一致性。
for (var i=0; i < menuitems.length; i++) {
if (menuitems[i].addEventListener) {
menuitems[i].addEventListener('click', subOpen, false);
menuitems[i].addEventListener('mouseout', closeTimer, false);
menuitems[i].addEventListener('mouseover', cancelTimer, false);
menuitems[i].addEventListener('selectstart', menucursorselect, false);
} else if (menuitems[i].attachEvent) {
menuitems[i].attachEvent('onclick', bindHandler(menuitems[i], subOpen));
menuitems[i].attachEvent('onmouseout', bindHandler(menuitems[i], closeTimer));
menuitems[i].attachEvent('onmouseover', bindHandler(menuitems[i], cancelTimer));
menuitems[i].attachEvent('onselectstart', bindHandler(menuitems[i], menucursorselect));
}
}
function bindHandler(elem, handler) {
return function() {
return handler.call(elem, window.event);
};
}
FWIW,我会创建一个绑定(bind)函数来为您处理这个问题,以减少一些重复的代码。
for (var i=0; i < menuitems.length; i++) {
bindHandler(menuitems[i], 'click', subOpen);
bindHandler(menuitems[i], 'mouseout', closeTimer);
bindHandler(menuitems[i], 'mouseover', cancelTimer);
bindHandler(menuitems[i], 'selectstart', menucursorselect);
}
function bindHandler(elem, type, handler) {
if (elem.addEventListener)
elem.addEventListener(type, handler, false);
else if (elem.attachEvent)
elem.attachEvent("on" + type, function() {
return handler.call(elem, window.event);
};
}
关于javascript - 寻找 javascript "this"关键字替代 Internet Explorer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13073854/