Почему target != element в ИЕ?

Great Rash · October 20, 2009

Код:

function test(elem, control) {
	elem = typeof elem == 'string' ? document.getElementById(elem) : elem;
	control = typeof control == 'string' ? document.getElementById(control) : control;

	addListener(document.body, 'click', function(e) {
		e = e || window.event;
		var target = e.target || e.srcElement;

		alert(target == control); // в ИЕ все время "false", в Мозилле два алерта сначала "false" потом "true"
	});
}

Помогите понять, что я делаю не так?

s0rr0w · October 20, 2009

Код:

function test(elem, control) {
	elem = typeof elem == 'string' ? document.getElementById(elem) : elem;
	control = typeof control == 'string' ? document.getElementById(control) : control;

	addListener(document.body, 'click', function(e) {
		e = e || window.event;
		var target = e.target || e.srcElement;

		alert(target == control); // в ИЕ все время "false", в Мозилле два алерта сначала "false" потом "true"
	});
}

Помогите понять, что я делаю не так?

Неплохо было бы увидеть HTML.

Да и зачем вы проверяете на совпадение таргета? Присваивайте сразу элементу listener

s0rr0w · October 20, 2009

HTML показать не могу, разве что тестовую страницу состряпать. В общем у меня задача написать универсальную функцию которая будет показывать/прятать некий блок данных (elem) на странице по клику на кнопку (control), а если я тыкну не по кнопке, а по любому другому месту на странице, то блок должен прятаться.
Ща сварганю тестовую страницу. Сайт упал... Вот:

Лично я бы сделал так.

Сделал контейнер тултипа с идентификатором.

Внутри него загрузил бы кучу контейнеров с подсказками, и проидентифицировал бы каждый контейнер.

На окно повесил бы событие, которое скрывает тултип.

На кнопки навесил бы событие, по которому показывается контейнер тултипов и конкретная подсказка. Не забыть остановить распространение события, иначе сработает онклик на окне и тултип скроется.

Все.

Great Rash · October 20, 2009

Хочется сделать одну функцию, а не 2.

s0rr0w · October 20, 2009

Хочется сделать одну функцию, а не 2.

Сделайте одну. Но для всего окна передайте параметр, что именно на него нажато было, чтобы упростить идентификацию.

Great Rash · October 20, 2009

Несколько раз перечитал сообщение номер 4. Что-то я себе слабо представляю как это должно выглядеть. Плюс у меня нет никаких пождсказок. Должен всплывать любой контейнер id которого я передам в функцию. Мозг уже кипит, может я чего не так объясняю?

s0rr0w · October 20, 2009

Несколько раз перечитал сообщение номер 4. Что-то я себе слабо представляю как это должно выглядеть. Плюс у меня нет никаких пождсказок. Должен всплывать любой контейнер id которого я передам в функцию. Мозг уже кипит, может я чего не так объясняю?

Сколько у тебя может быть одновременно открытых всплытых блоков?

Может ты попробуешь нарисовать то, что тебе нужно? Или описать задачу еще раз?

Great Rash · October 20, 2009

HTML показать не могу, разве что тестовую страницу состряпать. В общем у меня задача написать универсальную функцию которая будет показывать/прятать некий блок данных (elem) на странице по клику на кнопку (control), а если я тыкну не по кнопке, а по любому другому месту на странице, то блок должен прятаться.

Ща сварганю тестовую страницу. Сайт упал... Вот:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		.check-menu {
			display: none;
			position: absolute;
			z-index: 99999;
			width: 200px;
			padding: 2px;
			list-style: none;
			border: #81a1cc 1px solid;
			background: #f3f3f3;
		}

		.check-menu li {
			padding: 5px;
			font-size: 11px;
		}

		.check-menu li:hover {
			padding: 4px;
			font-weight: bold;
			border: #dea300 1px solid;
			background: #fee093;
		}
	</style>

	<script type="text/javascript">
		function toggleElemVisibility(elem, control) {
			elem = typeof elem == 'string' ? document.getElementById(elem) : elem;
			control = typeof control == 'string' ? document.getElementById(control) : control;

			addListener(document.body, 'click', function(e) {
				e = e || window.event;
				var target = e.target || e.srcElement;

				if (target == control) {
					if (!elem.style.display || elem.style.display == 'none') {
						elem.style.display = 'block';
					} else {
						elem.style.display = 'none';
					}
				} else {
					while (target && target.tagName.toLowerCase() != 'body') {
						if (target == elem) {
							return;
						}

						target = target.parentNode;
					}

					elem.style.display = 'none';
				}
			});
		}

		function addListener(elem, ev, fn) {
			if (document.addEventListener) { // Gecko
				elem.addEventListener(ev, fn, false);
			} else if (document.attachEvent) { // IE
				elem.attachEvent('on' + ev, fn);
			} else { // Other
				elem['on' + ev] = fn;
			}
		}
	</script>
</head>

<body>

	<img id="toggleImg" src="img/ico/ico-down-arrow.gif" />
	<ul id="hiddenList" class="check-menu">
		<li onclick="someFunc();">Пометить все записи</li>
		<li onclick="someFunc();">Снять выделение</li>
	</ul>

	<script type="text/javascript">
		toggleElemVisibility('hiddenList', 'toggleImg');
	</script>

</body>
</html>

Great Rash · October 20, 2009

Блок наверное может быть только один. Нарисовать то я могу, только мне некуда залить картинку, чтобы ее показать тут. Ведь на форум лить нельзя, а больше мне собссно и некуда.

В общем в тестовой странице видно что я хочу сделать. Я вот сделал еще одну, только не пойму на тестовой странице все работает, а в проекте нет... Подозреваю, что код кривой, но доказать не могу...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		div {
			display: none;
			width: 100px;
			height: 100px;
			background: red;
		}
	</style>

	<script type="text/javascript">
		function toggleElemVisibility(elem, control) {
			elem = typeof elem == 'string' ? document.getElementById(elem) : elem;
			control = typeof control == 'string' ? document.getElementById(control) : control;

			addListener(control, 'click', function(e) {
				e = e || window.event;
				var target = e.target || e.srcElement;

				if (!elem.style.display || elem.style.display == 'none') {
					elem.style.display = 'block';
				} else {
					elem.style.display = 'none';
				}

				if (e.stopPropagation) {
					e.stopPropagation();
				} else {
					e.cancelBubble = true;
				}
			});

			addListener(document.body, 'click', function(e) {
				e = e || window.event;
				var target = e.target || e.srcElement;

				while (target && target.tagName.toLowerCase() != 'body') {
					if (target == elem) {
						return;
					}

					target = target.parentNode;
				}

				elem.style.display = 'none';
			});
		}

		function addListener(elem, ev, fn) {
			if (document.addEventListener) { // Gecko
				elem.addEventListener(ev, fn, false);
			} else if (document.attachEvent) { // IE
				elem.attachEvent('on' + ev, fn);
			} else { // Other (KHTML for example)
				elem['on' + ev] = fn;
			}
		}

		function removeListener(elem, ev, fn) {
			if (document.addEventListener) { // Gecko
				elem.removeEventListener(ev, fn, false);
			} else if (document.attachEvent) { // IE
				elem.detachEvent('on' + ev, fn);
			} else { // Other (KHTML for example)
				elem['on' + ev] = null;
			}
		}
	</script>
</head>

<body>

	<b id="b">тыкни в меня</b>
	<div id="d"></div>

	<script type="text/javascript">
		toggleElemVisibility('d', 'b');
	</script>
</body>
</html>

Проверять надо в ИЕ7. О, только сейчас заметил, сто надо сделать один в один как тут на форуме кнопка "Редакт." (когда всплывает менюшка "полное редактирование" и "быстрое редактирование").

Edited October 20, 2009 by Great Rash

s0rr0w · October 20, 2009

У тебя уже больше одной функции тут получается.

Короче, предлагаю тебе разработать компонент. :unsure: Чтобы можно было повторно использовать.

Great Rash · October 21, 2009

Собссно эт я и хочу сделать. Но ИЕ (гад!) палки в колеса вставляет. И вообще где бы почитать про реализацию эвентов в ИЕ и браузерах?

s0rr0w · October 21, 2009

Собссно эт я и хочу сделать. Но ИЕ (гад!) палки в колеса вставляет. И вообще где бы почитать про реализацию эвентов в ИЕ и браузерах?

Да, с ИЕ будут проблемы.

Хотя, можно попробовать обмануть. Если навешивать обработчик через onclick, а не аттач, то там можно передать напрямую объект, на который было произведено нажатие.

Great Rash · October 21, 2009

Как? Можно небольшой примерчик?

UPD:

Разобрался с проблемой ИЕ. Оказывается я в другом скрипте создавал внутри элемента <div>, т.е. мне было необходимо скриптом обернуть дивом содержимое некоего контейнера и я писал так:

див.innerHTML = некийКонтейнер.innerHTML;
некийКонтейнер.innerHTML = '';

некийКонтейнер.appendChild(див);

И при этом терялся этот слушатель. Почему так произошло? В чем моя ошибка?

Edited October 21, 2009 by Great Rash

s0rr0w · October 21, 2009

Как? Можно небольшой примерчик?

<a href="#" id="i1">test</a>
<script type="text/javascript">
var n = document.getElementById("i1");

var foo = function () {
 alert( this );
};

if ( n.addEventListener ) {
 n.addEventListener( "click", foo, false );
}
else
{
 n.onclick=function(){
  foo.call( this );
 }
}

</script>

Great Rash · October 22, 2009

Что-то я не догнал, чем это отличается от вот такой записи:

n.onclick = function() {
	alert(this);
}

s0rr0w · October 22, 2009

Что-то я не догнал, чем это отличается от вот такой записи:
n.onclick = function() {
	alert(this);
}

По сути - ничем. :angry:

Sign In

Почему target != element в ИЕ?

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information