Проблема с нажатием Javascript в IE
-
01-07-2019 - |
Вопрос
Во-первых, я работаю над приложением, написанным таким образом, что некоторые из ваших типичных инструментов отладки невозможно использовать (или, по крайней мере, я не могу понять, как :).
JavaScript, HTML и т. д. — все «приготовлено» и закодировано (я думаю;Я немного не понимаю, как работает этот процесс) перед развертыванием, поэтому я не могу подключить VS 2005 к ie, а Firebug lite работает не очень хорошо.Кроме того, интерфейс заключен в рамки (фу), поэтому некоторые другие инструменты не работают.
Firebug отлично работает в Firefox, где этой проблемы нет (как и в Safari), поэтому я надеюсь, что кто-нибудь заметит что-то «очевидно» неправильное в том, как мой код будет работать с 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);
}
}
Решение
setAttribute ненадежен в IE.Он рассматривает доступ к атрибутам и доступ к свойствам объекта как одно и то же, поэтому, поскольку свойство DOM для атрибута «класс» называется «имя класса», вам придется использовать его вместо этого в IE.
Эта ошибка исправлена в новой бета-версии IE8, но проще напрямую использовать свойство HTML DOM уровня 1:
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 (Tools-> Internet Options-> Advanced) и поместите «отладчик»; Оператор в коде, IE автоматически разбудет Visual Studio, когда он достигнет оператора отладчика.
У меня были проблемы с этим в IE.Если я правильно помню, мне нужно было поместить начальное значение стиля «отображение» непосредственно в HTML-код, который был изначально сгенерирован.Например:
<table>
<tr style="display:none"> ... </tr>
<tr style="display:"> ... </tr>
</table>
Тогда я мог бы использовать JavaScript, чтобы изменить стиль так, как вы это делаете.
Я всегда использую style.display="block" и style.display="none".