IE Javascript 클릭 문제

StackOverflow https://stackoverflow.com/questions/102261

문제

우선, 저는 일반적인 디버깅 도구 중 일부를 사용할 수 없도록 작성된 앱을 작업 중입니다(또는 적어도 어떻게 사용할 수 있는지는 알 수 없습니다).

JavaScript, html 등은 모두 "조리"되고 인코딩됩니다(제 생각에는;배포하기 전에 프로세스가 어떻게 작동하는지 약간 모호하므로 VS 2005를 즉에 연결할 수 없으며 Firebug Lite가 제대로 작동하지 않습니다.또한 인터페이스가 프레임 형식이므로(으악) 일부 다른 도구도 제대로 작동하지 않습니다.

Firebug는 이 문제가 없는(Safari도 마찬가지) Firefox에서 훌륭하게 작동하므로 누군가가 내 코드가 IE에서 작동하는 방식에서 "분명히" 잘못된 점을 발견할 수 있기를 바랍니다.그 기이함에 대해 더 많은 정보가 제공될 수 있지만 이것부터 시작하겠습니다.

기본적으로 일반 테이블 행을 표시하지 않도록 하여 테이블을 헤더로 "축소"하는 기능이 있습니다.나는 가지고있다 "onclick='toggleDisplay("theTableElement", "theCollapseImageElement")'" 에서 <tr> 태그와 테이블은 "class='closed'"로 시작합니다.

FF 및 Safari에서는 표를 한 번 클릭하면 축소 및 확장되지만 IE 표에서는 확장하려면 여러 번 클릭해야 합니다(1에서 5 사이의 임의의 숫자인 것처럼 보입니다).때로는 처음에 "열린" 후 잠시 동안 한 번의 클릭으로 테이블이 확장 및 축소되지만 결국에는 여러 번의 클릭이 필요한 상태로 되돌아갑니다.Visual Studio에서 볼 수 있는 작은 내용을 통해 매번 함수에 실제로 도달하고 있음을 알 수 있습니다.어떤 조언이라도 미리 감사드립니다!

JS 코드는 다음과 같습니다.

bURL_RM_RID="some image prefix";
CLOSED_TBL="closed";
OPEN_TBL="open";
CLOSED_IMG= bURL_RM_RID+'166';
OPENED_IMG= bURL_RM_RID+'167';

//collapses/expands tbl (a table) and swaps out the image tblimg
function toggleDisplay(tbl, tblimg) {
    var rowVisible;
    var tblclass = tbl.getAttribute("class");
    var tblRows = tbl.rows;
    var img = tblimg;

    //Are we expanding or collapsing the table?
    if (tblclass == CLOSED_TBL) rowVisible = false;
    else rowVisible = true;

    for (i = 0; i < tblRows.length; i++) {
        if (tblRows[i].className != "headerRow") {
            tblRows[i].style.display = (rowVisible) ? "none" : "";
        }
    }

    //set the collapse images to the correct state and swap the class name
    rowVisible = !rowVisible;
    if (rowVisible) {
        img.setAttribute("src", CLOSED_IMG);
        tbl.setAttribute("class",OPEN_TBL);     
    }
    else {
        img.setAttribute("src", OPENED_IMG);
        tbl.setAttribute("class",CLOSED_TBL);
    }
}

­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­

도움이 되었습니까?

해결책

IE에서는 setAttribute를 신뢰할 수 없습니다.이는 속성 액세스와 객체 속성 액세스를 동일한 것으로 취급하므로 'class' 속성에 대한 DOM 속성이 'className'이라고 불리기 때문에 IE에서는 대신 이를 사용해야 합니다.

이 버그는 새로운 IE8 베타에서 수정되었지만 DOM 레벨 1 HTML 속성을 직접 사용하는 것이 더 쉽습니다.

img.src= CLOSED_IMAGE;
tbl.className= OPEN_TBL;

스타일시트에서 테이블 접기를 수행할 수도 있습니다. 그러면 속도가 더 빨라지고 스크립트에서 테이블 행을 반복해야 하는 번거로움이 줄어듭니다.

table.closed tr { display: none; }

다른 팁

이 줄을 바꿔 보셨나요?

tblRows[i].style.display = (rowVisible) ? "none" : "";

다음과 같은 것

tblRows[i].style.display = (rowVisible) ? "none" : "table-row";

또는

tblRows[i].style.display = (rowVisible) ? "none" : "auto";

실제 onclick 호출을 원할 수도 있습니다. <tr> 개인보다는 태그 <th> 태그.이렇게 하면 HTML에 JS가 적어서 유지 관리가 더 쉬워집니다.

IE (도구-> 인터넷 옵션-> 고급)에서 스크립트 디버깅을 활성화하고 '디버거'를 넣으십시오. 진술서 코드에서, 즉 디버거 명령문에 도달하면 비주얼 스튜디오를 자동으로 가져옵니다.

IE에서 이와 관련된 문제가 있었습니다.기억이 정확하다면 처음 생성된 HTML에 직접 "표시" 스타일의 초기 값을 입력해야 했습니다.예를 들어:

<table>
  <tr style="display:none"> ... </tr>
  <tr style="display:"> ... </tr>
</table>

그런 다음 JavaScript를 사용하여 스타일을 변경할 수 있습니다.

나는 항상 style.display = "block" 및 style.display = "none"을 사용합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top