window.event.srcElement.options不適用於FF

Question

window.event.srcElement.options(window.event.srcElement.selectedIndex).value適用於Internet Explorer（和Chrome），但不適用於FireFox。如何在FireFox中完成這項工作？

Answer 1

var addEvent = (function() { 
function addEventIE(el, ev, fn) { 
    return el.attachEvent('on' + ev, function(e) { 
    return fn.call(el, e); 
    }); 
} 
function addEventW3C(el, ev, fn) { 
    return el.addEventListener(ev, fn, false); 
} 
return window.addEventListener ? addEventW3C:addEventIE; 
})(); 

var domRef = document.getElementById('foo'); 

addEvent(domRef, 'change', function(e) { 
    e = e || window.event; 
    var el = e.target ? e.target : e.srcElement, 
     value = el.value; 
    alert(value) 
}); 

在IE中，event是窗口的屬性，在它的第一個參數傳遞現代DOM支持的瀏覽器。

Answer 2

有兩種方法： 假設有標記

<SELECT name="ddlQuery" id="ddlQuery" style="width:273px;" 
     onchange="GetDropDownValue(event)"> 
... 

的HTML。

使用一個js函數：

function GetDropDownValue(e) 
{ 
    var rtnVal = ""; 
    var sel = document.getElementById(getTargetID(e)); 
    for (var i = 0; i < sel.options.length; ++i) { 
     if (sel.options[i].selected == true) { 
      rtnVal = sel.options[i].value; 
      break; 
     } 
    } 
    alert(rtnVal); 
    return rtnVal; 
} 

function getTargetID(e) { 

    if (!e) { var e = window.event; } 
    var objTarget = e.srcElement ? e.srcElement : e.target; 
    return objTarget.id; 
} 

另一個使用jQuery：

$('#ddlQuery').val() 

Answer 3

event.target.options[event.target.selectedIndex].value。雖然一如既往地與事件你必須已通過事件對象到一個函數，所以如：

<script> 
    function selectChanged(event) { 
     var target= event.target || event.srcElement; 
     doSomethingWith(target.options[target.selectedIndex].value); 
    }; 
</script> 

<select onchange="selectChanged(event)">...</select> 

直接設置處理程序，並使用this可能會更容易：

<select id="x">...</select> 

<script> 
    document.getElementById('x').onchange= function() { 
     doSomethingWith(this.options[this.selectedIndex].value); 
    }; 
</script> 

注意看着options[selectedIndex]是爲了與舊版瀏覽器兼容。這些日子裏，你通常可以說select.value。

Answer 4

Firefox中沒有全局event對象。事件作爲參數傳遞給他們的處理程序。此外，而不是srcElement，您尋找target。

如果您使用像jQuery這樣的JavaScript庫，所有瀏覽器特定的怪癖都會爲您處理。

否則，我建議你閱讀這些文章

• http://www.quirksmode.org/js/introevents.html
• http://www.quirksmode.org/js/events_properties.html

Answer 5

IE使用srcElement大多數其他瀏覽器（包括Firefox）使用target。另外，Firefox傳遞事件對象，而IE只是填充全局事件對象w /當前事件的數據。

你必須在你的代碼中處理兩者。你如何處理第二個將取決於你如何分配處理程序。

但是，這裏有一種方法。

function changeHanlder(event) 
{ 
    var elem = event.target || event.srcElement; 
    alert(elem.options[elem.selectedIndex].value); 
} 

還值得注意的是，所有現代javascirpt庫都爲您處理這種抽象。

Answer 6

Firefox使用e.htmlEvent.target。nodeName

您可以使用try/catch來處理這兩個瀏覽器。