无法在IE 7/8中使用parentNode获取DOM节点

问题描述:

我正在使用Adam Maschek's excellent image map tool的改编版本。我添加的新功能是左/顶/宽/高输入框,以便您可以对热点位置/大小进行像素控制。我已经在FF和Chrome中正常工作,但是我遇到的问题是在IE 7/8中,它只是不会在更改时检索输入框的值。无法在IE 7/8中使用parentNode获取DOM节点

这里就是问题正在发生作用:

function gui_dimension_change(e) { 

function changeAreaPos(areaNum, inputVal, cssAttrib, coordPos) { 
var coordsBox = document.getElementsByClassName('img_coords')[areaNum], 
    newCoordsVal = coordsBox.value.split(","), 
    newWidth = "", 
    newHeight = "", 
    imCode = imcodeContainer.value, 
    pattern = imCode.match(/\d+,\d+,\d+,\d+/g); 

    myimgmap.areas[areaNum].style[cssAttrib] = inputVal; 

    if (cssAttrib === "left" || cssAttrib === "top") { 
     myimgmap.areas[areaNum].label.style[cssAttrib] = inputVal; 
     newCoordsVal[coordPos] = inputVal; 
    } else if (cssAttrib === "width") { 
     myimgmap.areas[areaNum].width = inputVal; 
     newWidth = parseInt(newCoordsVal[0]) + parseInt(inputVal); 
     newCoordsVal[coordPos] = newWidth; 
    } else if (cssAttrib === "height") { 
     myimgmap.areas[areaNum].height = inputVal; 
     newHeight = parseInt(newCoordsVal[1]) + parseInt(inputVal); 
     newCoordsVal[coordPos] = newHeight; 
    } 

    newCoordsVal = newCoordsVal.join(","); 
    myimgmap.areas[areaNum].lastInput = newCoordsVal; 
    coordsBox.value = newCoordsVal; 

    imCode = imCode.replace(pattern[areaNum], newCoordsVal); 
    imcodeContainer.value = imCode; 

}; 

    // alert(this); 
    // alert(this.parentNode); 
    // alert(this.parentNode.id); 

var inputParent = this.parentNode, 
    inputVal = this.value, 
    whichBox = this.name, 
    areaNum = inputParent.id.replace("img_area_", ""), 
    imcodeContainer = document.getElementById('html_container'); 

switch(whichBox) 
{ 
    case "img_left": 
     changeAreaPos(areaNum, inputVal, "left", 0); 
    break; 
    case "img_top": 
     changeAreaPos(areaNum, inputVal, "top", 1); 
    break; 
    case "img_width": 
     changeAreaPos(areaNum, inputVal, "width", 2); 
    break; 
    case "img_height": 
     changeAreaPos(areaNum, inputVal, "height", 3); 
    break; 
} 

} 

的函数被调用,像这样:

myimgmap.addEvent(props[id].getElementsByTagName('input')[5], 'change', gui_dimension_change); 
myimgmap.addEvent(props[id].getElementsByTagName('input')[6], 'change', gui_dimension_change); 
myimgmap.addEvent(props[id].getElementsByTagName('input')[7], 'change', gui_dimension_change); 
myimgmap.addEvent(props[id].getElementsByTagName('input')[8], 'change', gui_dimension_change); 

于是就改变事件,我不能this.parentNode设置inputParent ,并且不能使用this.value获取输入框的值。在FF/Chrome中工作,但不是IE 7/8,任何想法,为什么IE浏览器与parentNode有问题,并获得价值?

+1

你可以请张贴更具体的代码部分?一个产生你正在描述的错误。相信我,很少有人会真正复制并添加引用的文件,然后测试它,更不用说阅读它了。 – Adi 2012-08-13 12:10:03

好的,我想出了解决方案,以防万一有人在意。这完全是因为IE处理事件目标与其他浏览器不同,所以我做了以下操作:

var obj = (myimgmap.isMSIE) ? window.event.srcElement : e.currentTarget; 

并使用obj代替这个。

愚蠢的IE!