IE：onclick 功能不适用于“this”答案

【问题标题】：IE: onclick function doesn't work with 'this'IE：onclick 功能不适用于“this”
【发布时间】：2014-04-05 03:11:40
【问题描述】：

好的，所以我有一个奇怪的 IE 8 及以下版本的 JS 函数问题。（谁会猜到）

在我页面的“脚本”部分定义了这个函数，它应该在点击时改变节点元素的背景颜色：

function highlight(){
    if (this.style.backgroundColor != "rgb(163, 167, 334)"){
        this.style.backgroundColor = "rgb(163, 167, 334)";
    }
}

基本上，它的意思是“如果不是给定的背景颜色，则将其设为背景颜色。”

为了唤起方法，同样的'script'标签还包含：

button.attachEvent('onmousedown', highlight);

出于某种原因，我在 >IE9 的开发人员工具控制台中不断收到以下错误（在兼容模式下将 ie9 运行为“ie8”）：

SCRIPT5007：无法获取属性“backgroundColor”的值：对象为空或未定义

我在 IE8 中使用“attachEvent”的方式与在 Firefox、Chrome 和 IE9 中使用“addEventListener”的方式相同。不幸的是，它的行为似乎并不完全相同。

我需要这个，因为我的客户坚持使用 IE8。

有什么建议吗？

发现编辑/解决方案：发现问题。突出显示函数引用“this”。当 attachEvent 触发时，它总是将“this”理解为“浏览器窗口”，而不是接收操作的对象。为了规避这个问题，有两种方法：

element.onevent = 函数；（在我的例子中：button.onclick = highlight）

元素[onevent] = 函数；（在我的例子中：button[onclick] = highlight）

关于第二个变体，这是发现的一个额外的东西（把这个留在这里以防任何绊倒的人）。我就在这里分享一下：点击事件实际上可以通过编写 obj[onclick] = func 来触发。（在我的情况下是：“button[onclick] = highlight;”这很有用，因为它允许在必要时“传入”事件的名称。

感谢大家的帮助！结案。

【问题讨论】：

How to reference the caller object ("this") using attachEvent 的可能重复项
我强烈建议使用 jQuery 等框架来缓解跨浏览器问题。
您好，Barmar，您提供的链接不是完全相同的问题。但是，该链接中的一个 cmets 使我发现了实际问题。问题是“attachEvent”在使用“this”时只发现“window”对象，使其基本上无用，找到了替代方法。谢谢！

标签： javascript html css

【解决方案1】：

显然是一个奇怪的范围问题。考虑声明一个要访问的变量而不是this（当我们不知道标记时很难在实践中显示）：

var hl = document.getElementById('highlight');

和

function highlight(){
  if (hl.style.backgroundColor != "rgb(163, 167, 334)"{
    hl.style.backgroundColor = "rgb(163, 167, 334)";
  }
}

this.style.backgroundColor 指的是上下文，你的函数。该函数没有style.backgroundColor，但onmousedown 附加到该函数的元素可能有。另一种解决方案是：

document.getElementById('theElementInQuestion').onmousedown = function() {
  if (this.style.backgroundColor != "rgb(163, 167, 334)"{
    this.style.backgroundColor = "rgb(163, 167, 334)";
  }
}

【讨论】：

【解决方案2】：

可能会想要进行特征检测

if (button.addEventListener){
 button.addEventListener( 'onmousedown', highlight, false );
}else if (button.attachEvent) {
 button.attachEvent( 'onmousedown', highlight );
}

这应该正确注册事件以访问this。但是，如果this 仍然未定义，则可能需要访问ie 中的event 对象。

function highlight(ev){
 if( typeof(ev) == "undefined" ){
  ev = window.event;
 }
 var target = ev.target || ev.srcElement;
 if (target.style.backgroundColor != "rgb(163, 167, 334)"{
  target.style.backgroundColor = "rgb(163, 167, 334)";
 }
}

【讨论】：

您好，实际上我已经实现了以类似方式工作的特征检测（如果这不起作用，请执行此操作）。使用类似的语法（不同之处在于语句被切换并且第一个是负数，如“如果 addEventListener 不存在”），但我会尝试第二件事，如果它有效，我会更新你！

【解决方案3】：

我会为此使用 JQuery，因为它具有出色的跨浏览器支持。我使用 $("#button") 来查找 id="button" 的元素，但如果您想一次绑定更多元素，可以使用 class=".buttonClass"。

$("#button").click(highlight);

function highlight() {
    if (this.style.backgroundColor != "rgb(163, 167, 334)") {
        this.style.backgroundColor = "rgb(163, 167, 334)";
    }
};

我已经在包括 IE8 在内的多个浏览器中对此进行了测试，并且运行良好。

【讨论】：

【解决方案4】：

function highlight(){
if (this.style.backgroundColor != "rgb(163, 167, 334)"{
    this.style.backgroundColor = "rgb(163, 167, 334)";
}}

您缺少一个“)”来关闭 if 的条件。

【讨论】：

啊，是的，很抱歉，这是我在复制代码时的草率。固定。