Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JavaScript onblur в ie. Internet Explorer 8, 9 / 14 сообщений из 14, страница 1 из 1
19.06.2014, 16:24
    #38674530
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JavaScript onblur в ie. Internet Explorer 8, 9
Столкнулся с такой проблемой. В 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, 17:16
    #38674589
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JavaScript onblur в ie. Internet Explorer 8, 9
Сравнить event.srcElement и this, если это разные элементы — не закрывать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.06.2014, 17:37
    #38674622
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JavaScript onblur в ie. Internet Explorer 8, 9
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:45
    #38674635
Яростный Меч
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JavaScript onblur в ie. Internet Explorer 8, 9
user89,

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

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

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

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

Код: 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, 20:08
    #38674759
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JavaScript onblur в ie. Internet Explorer 8, 9
Яростный Меч, 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
| Ответить | Цитировать | Написать  
22.12.2014, 11:07
    #38839406
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JavaScript onblur в ie. Internet Explorer 8, 9
Вариант без глобальной переменной, через 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, 17:50
    #38839947
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JavaScript onblur в ie. Internet Explorer 8, 9
 
Более улучшенный пример
Код: 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, 19:42
    #38840018
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JavaScript onblur в ie. Internet Explorer 8, 9
В реальности всё сложнее.
 
Есть глюк в Мозилле, почему-то 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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JavaScript onblur в ie. Internet Explorer 8, 9 / 14 сообщений из 14, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 498ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1446419]:
 0ms
get settings:
 7ms
get forum list:
 20ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 154ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 64ms
get tp. blocked users:
 1ms
others: 231ms
total:  498ms
x
x
Закрыть


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