IE瀏覽器：onclick函數不能與'this'一起工作

好的，所以我有一個奇怪的IE版本8和以下的JS功能問題。（誰願意猜到）IE瀏覽器：onclick函數不能與'this'一起工作

有一個在我的網頁的「腳本」部分定義了這個功能，它應該更改節點元素上點擊背景色：

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

基本上，它說'如果它不是給定的backgroundColor，則使其成爲backgroundColor。'

爲了喚起方法，同樣的「腳本」標籤還包含：

button.attachEvent('onmousedown', highlight);

出於某種原因，我不斷地得到了> IE9的開發者工具控制檯以下錯誤（在兼容模式下運行IE9爲 'IE8'）：

SCRIPT5007：無法獲得財產 '的backgroundColor' 的價值：對象爲空或未定義

我在IE8中使用'attachEvent'，就像我在Firefox，Chrome和IE9中使用'addEventListener'一樣。不幸的是，它的行爲似乎不完全一樣。

我需要這個，因爲我的客戶堅持使用IE8。

有什麼建議嗎？

發現編輯/解決方案：發現問題。突出顯示功能參考「this」。當attachEvent觸發時，它始終將'this'理解爲'瀏覽器窗口'，而不是接收動作的對象。爲了規避這個問題，有兩種方法：

element.onevent = function; （在我的情況下：button.onclick = highlight）

element [onevent] = function; （在我的情況下：按鈕[onclick] =高亮）

關於第二個變體，發現了一件額外的東西（在這裏爲任何人絆倒）。我將在這裏分享它：通過編寫obj [onclick] = func實際上可以觸發點擊事件。（在我的情況，這是「按鈕[點擊] =亮點;」因爲它允許一個事件的名稱「順便」在必要的時候，這是非常有用

謝謝大家對你的幫助結案

！。。

來源

2014-03-03 user2588440

可能重複的[如何使用attachEvent引用調用者對象（「this」）]（http://stackoverflow.com/questions/4590122/how-to-reference-the-caller-object-this-using- attachevent） – Barmar

我強烈建議像jQuery這樣的框架來緩解跨瀏覽器問題。 – user2793390

你好，Barmar，你提供的鏈接不是完全一樣的問題。然而，該鏈接中的其中一條評論讓我發現了實際問題。問題在於'attachEvent'在使用'this'時只發現'window'對象，使得它基本上無用，找到了替代方案。謝謝！ – user2588440

顯然奇數範圍，問題考慮宣佈一個變量來訪問的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)"; 
    } 
}

來源

2014-03-03 21:14:54 davidkonrad

也許會想與特徵檢測

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)"; 
} 
}

來源

2014-03-03 21:17:31

您好，的確，我的確有功能檢測功能以類似的方式實現（如果這不起作用，請執行此操作）。使用類似的語法（區別在於語句被切換，並且第一個是負數，因爲在「如果addEventListener不存在」）但是我會嘗試第二件事，如果它有效，就更新它！ – user2588440

我會使用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在內的幾種瀏覽器中測試過了，它工作正常。

來源

2014-03-03 21:24:54 daniellepelley

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

你缺少一個「）」來關閉if的條件。

來源

2014-03-03 21:34:28 KnasScripter

啊，是的，對不起，這是在我身邊sloppiness複製代碼時。固定。 – user2588440

IE瀏覽器：onclick函數不能與'this'一起工作

回答

相關問題