-1

私は、Adam Maschek の優れたイメージ マップ ツールの適応バージョンに取り組んでいます。私が追加した新しい機能は、ホットスポットの位置/サイズをピクセルで制御できるように、左/上/幅/高さの入力ボックスです。FF と Chrome では正常に動作していますが、問題は IE 7/8 にあり、変更時に入力ボックスの値を取得できません。

問題が発生している関数は次のとおりです。

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 では動作しません。

4

1 に答える 1

1

OK、誰かが気になる場合に備えて、解決策を見つけました。これはすべて、IE が他のブラウザーとは異なる方法でイベント ターゲットを処理するためでした。そのため、次のことを行いました。

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

this の代わりに obj を使用しました。

バカIE!!!

于 2012-08-15T14:40:37.500 に答える