ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JavaScript onblur в ie. Internet Explorer 8, 9
14 сообщений из 14, страница 1 из 1
JavaScript onblur в ie. Internet Explorer 8, 9
    #38674530
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Столкнулся с такой проблемой. В IE 8,9 событие onblur возникает, если щелкнуть по таблице, которая внутри родительского DIV. В Опере, Мозилле всё правильно, событие onblur НЕ возникает. Как сделать, чтобы в IE тоже была правильная реакция (div должен исчезнуть, если щелкнуть только за пределами div)
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
<!DOCTYPE html>
<html>
<style> 
  #div1 {border:1px solid grey;}
</style>
<body onload="document.getElementById('div1').focus();">
<div id="div1" tabindex="-1" onfocus="showFocus(this);" onblur="this.style.display='none';">
	Сюда можно щелкать, DIV не исчезнет. Всю верно.<br><br>
	<table style="background:#FFDF88;">
		<tr><td>Если щелкнуть в эту фразу, то в<br>IE8-9 DIV исчезнет, а не должен</td></tr>
	</table>
</div>
<script>
function showFocus(el) {el.style.background = '#D6E8FF';}
</script>
</body>
</html>
...
Рейтинг: 0 / 0
19.06.2014, 16:24
| Ответить | Цитировать | Написать  
JavaScript onblur в ie. Internet Explorer 8, 9
    #38674589
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Сравнить event.srcElement и this, если это разные элементы — не закрывать.
...
Рейтинг: 0 / 0
19.06.2014, 17:16
| Ответить | Цитировать | Написать  
JavaScript onblur в ie. Internet Explorer 8, 9
    #38674622
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Antonariy,

не получается. event.srcElement и this равны.   А событие OnMouseDown на таблице возникает позже :(
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
<!DOCTYPE html>
<html> <style> #div1 {border:1px solid grey;} </style>
<body onload="document.getElementById('div1').focus();">
<div id="div1" tabindex="-1" onfocus="showFocus(this);" onblur="ClosePanel(this,event);">
	Сюда можно щелкать, DIV не исчезнет. Всю верно.<br><br>
	<table style="background:#FFDF88;" onmousedown="md(event);">
		<tr><td>Если щелкнуть в эту фразу, то в<br>IE8-9 DIV исчезнет, а не должен</td></tr>
	</table>
</div>
<script>
function showFocus(el) {el.style.background = '#D6E8FF';}
function ClosePanel(d,e) {
	e = e || window.event;
	var src = e.srcElement;
alert(d +'\n' + src);
}
function md(e) {
	e = e || window.event;
	var t = e.srcElement;
alert(t);
}
</script>
</body></html>
...
Рейтинг: 0 / 0
19.06.2014, 17:37
| Ответить | Цитировать | Написать  
JavaScript onblur в ie. Internet Explorer 8, 9
    #38674635
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
user89,

стандартный паттерн:
по onblur ставишь таймаут на скрытие элемента (~10-20 мс), по onmousedown убиваешь таймаут, и этот onmousedown по идее можно вешать на сам див - событие всплывет (если ему не помешают всплыть).
...
Рейтинг: 0 / 0
19.06.2014, 17:45
| Ответить | Цитировать | Написать  
JavaScript onblur в ie. Internet Explorer 8, 9
    #38674636
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Попробуй использовать не event-параметр, а свойство окна: e = window.event || e;
...
Рейтинг: 0 / 0
19.06.2014, 17:45
| Ответить | Цитировать | Написать  
JavaScript onblur в ie. Internet Explorer 8, 9
    #38674639
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
Antonariy,

у ТС всё правильно используется.

просто через srcElement эту задачу не решить.
...
Рейтинг: 0 / 0
19.06.2014, 17:47
| Ответить | Цитировать | Написать  
JavaScript onblur в ie. Internet Explorer 8, 9
    #38674640
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Хотя я туплю, див в любом случае является источником события.

Нужно проверить, является ли toElement или targetElement потомком дива.
...
Рейтинг: 0 / 0
19.06.2014, 17:49
| Ответить | Цитировать | Написать  
JavaScript onblur в ie. Internet Explorer 8, 9
    #38674644
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
для блюра они не заданы.
...
Рейтинг: 0 / 0
19.06.2014, 17:52
| Ответить | Цитировать | Написать  
JavaScript onblur в ie. Internet Explorer 8, 9
    #38674650
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Чорд :(
...
Рейтинг: 0 / 0
19.06.2014, 17:55
| Ответить | Цитировать | Написать  
JavaScript onblur в ie. Internet Explorer 8, 9
    #38674658
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Тогда так:

Код: html
1.
2.
3.
4.
5.
var curElem;

<div onmousemove="curElem = window.event.srcElement">

if(curElem==d) d.style.display = 'none';
...
Рейтинг: 0 / 0
19.06.2014, 17:59
| Ответить | Цитировать | Написать  
JavaScript onblur в ie. Internet Explorer 8, 9
    #38674759
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Яростный Меч, Antonariy, большое спасибо за помощь!
 
Работает в Мозилле и IE
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
<!DOCTYPE html>
<html>
<style>
#div1 {border:1px solid grey;}
</style>
<body onload="document.getElementById('div1').focus();">
<div id="div1" tabindex="-1" onfocus="showFocus(this);" onblur="ClosePanel(this,event);" onmousedown="mdown(this,event);">
	Данные DIV.<br><br>
	<table style="background:#FFDF88;">
		<tr><td>Данные в таблице</td></tr>
	</table>
</div>

<script>
var MyTable = null;

function showFocus(el) {
	MyTable = null;
	el.style.background = '#D6E8FF';
}

function ClosePanel(d,e) {
	e = e || window.event;
	var t = e.target || e.srcElement;
	if (e.srcElement && MyTable != null && MyTable != d) {d.focus(); return false;}
	d.style.display = 'none';
}

function mdown(d,e) {
	e = e || window.event;
	MyTable = e.target || e.srcElement;
}
</script>
</body>
</html>

...
Рейтинг: 0 / 0
19.06.2014, 20:08
| Ответить | Цитировать | Написать  
JavaScript onblur в ie. Internet Explorer 8, 9
    #38839406
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Вариант без глобальной переменной, через addEventListener
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
<!DOCTYPE html>
<html>
<style> 
.focused {background:#D6E8FF;}
.hidediv {display:none;}
</style>
<body onload="ShowFocus();">
<div class="MyDiv">
	Сюда можно щелкать, DIV не исчезнет. <div>Чтобы DIV пропал с экрана, нужно щелкнуть за его пределами.</div> <br>
	<table style="background:#FFDF88;">
		<tr><td>Если щелкнуть в эту таблицу, то в ie9 DIV тоже<br>не исчезнет, как в нормальных браузерах</td></tr>
	</table>
</div>
<script>
function onDivFocus() {this.className = 'focused';}
function onDivBlur() {this.className = 'hidediv';}

var MyDiv = document.getElementsByClassName('MyDiv')[0];
MyDiv.addEventListener('focus', onDivFocus, true);
MyDiv.addEventListener('blur', onDivBlur, true);
function ShowFocus() {
	MyDiv.tabIndex = '-1';
	MyDiv.focus();
}
</script>
</body>
</html>
...
Рейтинг: 0 / 0
22.12.2014, 11:07
| Ответить | Цитировать | Написать  
JavaScript onblur в ie. Internet Explorer 8, 9
    #38839947
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
 
Более улучшенный пример
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
<!DOCTYPE html>
<html>
<style>
.MyDiv {display:none;}
.focused {display:block; background:#D6E8FF;}
</style>
<body>
<button onclick="ShowFocus();">Показать DIV</button> <br><br>
<div class="MyDiv">
	Сюда можно щелкать, DIV не исчезнет. <div>Чтобы DIV пропал с экрана, нужно щелкнуть за его пределами.</div> <br>
	<table style="background:#FFDF88;">
		<tr><td>Если щелкнуть в эту таблицу, то в ie9 DIV тоже<br>не исчезнет, как в нормальных браузерах</td></tr>
	</table>
</div>
<br><br>
<div style="background:#eee;">DIV просто так</div>

<script>
function onDivFocus() {this.className = 'focused';}
function onDivBlur() {this.className = 'MyDiv';}

var MyDiv = document.getElementsByClassName('MyDiv')[0];
MyDiv.addEventListener('focus', onDivFocus, true);
MyDiv.addEventListener('blur', onDivBlur, true);
function ShowFocus() {
	MyDiv.className = 'focused';
	MyDiv.tabIndex = '-1';
	MyDiv.focus();
}
</script>
</body>
</html>

...
Рейтинг: 0 / 0
22.12.2014, 17:50
| Ответить | Цитировать | Написать  
JavaScript onblur в ie. Internet Explorer 8, 9
    #38840018
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
В реальности всё сложнее.
 
Есть глюк в Мозилле, почему-то display:none срабатывает при щелчке в любой input
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
<!DOCTYPE html>
<html>
<head>
<style>
.focused {background:#D6E8FF;}
.hidediv {display:none;}
</style>
</head>
<body onload="ShowFocus();">
<div style="background:#eee; margin:5px;">DIV просто так</div>
<div id="el"> <input type="text" size="60" name="name" value="Щелкните мышью сюда, в Мозилле весь DIV пропадет">
	<input type="checkbox"> Также DIV пропадет, если щелкнуть в любой элемент input <input type="radio">
	<br> Глюк только в Мозилле, <b>display:none</b> срабатывает при щелчке в любой input;
</div>
<div style="background:#eee; margin:5px;">DIV просто так</div>

<script>
function onDivFocus() {this.className = 'focused';}
function onDivBlur() {this.className = 'hidediv';}

var el = document.getElementById('el');
el.addEventListener('focus', onDivFocus, true);
el.addEventListener('blur', onDivBlur, true);

function ShowFocus() {
	el.tabIndex = '-1';
	el.focus();
}
</script>
</body>
</html>


 
Тогда скроем по другому. Кроссбраузерное решение
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
<!DOCTYPE html>
<html>
<head>
<style>
.focused {background:#D6E8FF;}
.hidediv {
	width:0;
	height:0;
	outline:none;
	overflow:hidden;
}
</style>
</head>
<body onload="ShowFocus();">
<div style="background:#eee; margin:5px;">DIV просто так</div>
<div id="el"> <input type="text" size="50" name="name" value="Щелкните мышью сюда, DIV не пропадет">
	<input type="checkbox"> Также DIV не пропадет, если щелкнуть в любой элемент input <input type="radio">
</div>
<div style="background:#eee; margin:5px;">DIV просто так</div>
<script>
function onDivFocus() {this.className = 'focused';}
function onDivBlur() {this.className = 'hidediv';}

var el = document.getElementById('el');
el.addEventListener('focus', onDivFocus, true);
el.addEventListener('blur', onDivBlur, true);

function ShowFocus() {
	el.tabIndex = '-1';
	el.focus();
}
</script>
</body>
</html>

...
Рейтинг: 0 / 0
22.12.2014, 19:42
| Ответить | Цитировать | Написать  
14 сообщений из 14, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JavaScript onblur в ie. Internet Explorer 8, 9
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38674589&tid=1446419]:
 0ms
get settings:
 10ms
get forum list:
 25ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 159ms
get topic data:
 14ms
get forum data:
 3ms
get page messages:
 73ms
get tp. blocked users:
 1ms
others: 277ms
total:  568ms
созд. / загр.: 568ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]