无法在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有问题,并获得价值?
答
好的,我想出了解决方案,以防万一有人在意。这完全是因为IE处理事件目标与其他浏览器不同,所以我做了以下操作:
var obj = (myimgmap.isMSIE) ? window.event.srcElement : e.currentTarget;
并使用obj代替这个。
愚蠢的IE!
你可以请张贴更具体的代码部分?一个产生你正在描述的错误。相信我,很少有人会真正复制并添加引用的文件,然后测试它,更不用说阅读它了。 – Adi 2012-08-13 12:10:03