Что всё-таки возвращает window.event.srcElement в IE?
Доброго времени суток, уважаемые форумчане! Вопрос в следующем:
В ниже приведённом примере при клике на ссылку с id='test1' или с id='test2' вызывается ф-я WrongMessage, которая выводит id этой самой ссылки алертом. То, что в IE this в функции НЕ указывает на текущий объект - это понятно... поэтому юзаем window.event.srcElement. Почему window.event.srcElement.id возвращает ID текущей ссылки, а window.event.srcElement возвращает непонятно что, хотя по логике должен указывать на текущий объект ссылки!? :-? P.S. правильная функция RightMessage(event) и ссылка с ID="respect" нам говорит, что всё ОК. Где же собака зарыта?! P.S.S. статьи http://learn.javascript.ru/this, http://learn.javascript.ru/bubbling-and-capturing, http://javascript.ru/tutorial/events/, http://javascript.ru/tutorial/events/properties я уже прочитал )) Код HTML <!DOCTYPE html> <html> <head> <title>Тест [this, return false] в IE</title> <script type="text/javascript" src="test.js" ></script> </head> <body> <!-- Чёткая ссылка )) --> <a href="http://javascript.ru" id="respect">Ссылка без onclick в HTML и без ошибок :)</a><br/><br/> <!-- Ссылки с неправильным JS (( --> <a href="http://javascript.ru" id="test1">Ссылка без onclick в HTML</a><br/> <a href="http://javascript.ru" id="test2" onclick="WrongMessage();return false;">Ссылка c onclick без this в HTML</a><br/> </body> </html> Код файла test.js
// универсальная кросс-браузерная ф-я для добавления событий
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
}
else {
elm['on' + evType] = fn;
}
}
function WrongMessage() {
// как ни странно, НО id выводится и ошибок в IE нет!!!
var aid=this.id || window.event.srcElement.id;
alert(aid);
// а вот здесь в IE aobj.id=undefined (( почему?!
var aobj=this || window.event.srcElement;
alert(aobj.id);
// нужно ТОЛЬКО для ссылки с id='test1'
// для ссылки с id='test2' прописано в onclick в HTML
return false;
}
function RightMessage(event) {
event = event || window.event;
// попутный вопрос №1: можно и грамотно ли писать так, раз работает?!
// var aobj=this || event.srcElement;
var aobj=event.target || event.srcElement;
alert(aobj.id);
// попутный вопрос №2: Есть ли разница между
// event.preventDefault ? event.preventDefault() : event.returnValue = false;
// и return false; !? Какой вариант лучше и почему?
return false;
}
function DOM_OK() {
var resp=document.getElementById("respect");
addEvent(resp, 'click', RightMessage, false);
var a1=document.getElementById("test1");
addEvent(a1, 'click', WrongMessage, false);
}
addEvent(window, 'load', DOM_OK, false);
|
думаю window.event.srcElement (если элемент есть <a>) возвращает его (элемента) href а именно строку "javascript.ru"
может попробуешь использовать например <span> вместо <а> я вот в Опере у себя сейчас попробовал onclick="alert(this)", алертует "window.ru" (то что я указал в качестве href) http://http://javascript.ru/forum/events/10421-ehlement-i.html |
SegaMega,
Цитата:
onclick="WrongMessage.call(this)" Цитата:
Цитата:
|
Цитата:
window.event.srcElement содержит ссылку на элемент у которого произошло событие, а то что элемент A возвращает строку ссылки, дык это потому что браузер перед отображением Ноды, пытается перевести переменную в строковой тип, тем самым вызывая метод .toString() у объекта.
<a href="yandex.ru" onclick="alert([this.toString(), this.nodeName, this.innerHTML].join('\n')); return false;">blah ololo</a>
|
Сорри Всем ))
:stop: Уважаемые Господа!!! Вынужден признать свою грубую ошибку, публично покаяться и как-то попытаться реабилитироваться :thanks: в глазах всех, кто читал моё первое сообщение... К тому же надеюсь, данная тема поможет тем кто плавает ещё в JavaScript - обязательно меня поправьте, если что!!! Итак пойдём вместе логичным путём с самого начала:
Назначаем функцию одним из способов: из HTML (инлайновый способ типа): <a href="http://javascript.ru" id="respect" onclick="RightMessage();return false;">Ссылка</a> или из JS после готовности DOM документа
var resp=document.getElementById("respect");
resp.attachEvent( "onclick" , RightMessage); // только для IE или Opera. В теле функции this будет указывать на глобальный объект window (!)
или resp.addEventListener( "click" , RightMessage, false) // только для браузеров, поддерживающих стандарт W3C. В теле функции this будет указывать на исходный объект, т.е. resp (!) или resp.onclick=RightMessage; // кросс-браузерно и this 100% указывает на resp!!! или resp.onclick=RightMessage.call(this); // Вот с этим честно признаюсь - пока не разобрался, но здесь ошибка 100% !!! т.к. идёт не присвоение функции событию клика, а ВЫЗОВ функции... Вот грамотные ссылки по теме: http://javascript.ru/tutorial/events/ - назначение событий http://habrahabr.ru/post/119841/ - вызовы функции Итак теперь переходим к самой функции RightMessage
function RightMessage(event) {
event = event || window.event; // event или window.event (для IE) = объект "событие"
// попутный вопрос №1: можно и грамотно ли писать так, раз работает?!
// var aobj=this || event.srcElement;
var aobj=event.target || event.srcElement; // event.target/srcElement - означает исходный элемент, на котором произошло событие.
alert(aobj.id); // выводим атрибут ID ссылки (aobj=resp)
return false; // отмена перехода по дефолтной ссылке
}
Сразу разберём мои ошибки: 1) var aobj=this || event.srcElement; так ни в коем случае писать нельзя, для получения исходного объекта!!! во всяком случае при назначении событий через attachEvent (для IE). Почему?! Да потому что this = window в IE, а event.srcElement - исходный элемент (т.е. resp) В итоге получим: aobj=window или resp (!!!) - значит, aobj мы присвом глобальный объект window ((( А это не гуд (( Вот для resp.addEventListener(...) или для resp.onclick=RightMessage; в теле функции this будет указывать на resp 100% 2) Дальше... :nono: какого фига я вообще использую event.target || event.srcElement; для получения (!) объекта в теле функции, которая весит на этом же объекте?! Эту тему грамотно использовать при делегировании например (http://learn.javascript.ru/event-delegation). В общем... хотел-то всего-навсего просто в теле функции, повешенной на ссылку через attachEvent или addEventListener, получить быстрый доступ к объекту этой ссылки... а получилось каши.... :( Объясните мне ещё раз плз несколько моментов: 1) как использовать конструкцию вида RightMessage.call(this), чтобы 100% this в теле функции указывал на исходный объект?! - если это вообще правильный вопрос... насколько я понял (http://javascript.ru/Function/call) - это именно ВЫЗОВ ф-ии... 2) как грамотно повесить событие через attachEvent, чтобы опять же в теле ф-ии this указывал на исходный объект? вариант resp.onclick=RigthMessage; - не вариант )) 3) как передавать АРГУМЕНТЫ в функцию при её назначении событию?! т.е. что-то типа:
var arg="hello";
resp.onclick=RigthMessage(arg); // неправильно
resp.addEventListener('click', RigthMessage(arg), false); // неправильно
Заранее спасибо за помощь всем... |
resp.onclick=RightMessage.call(this); вот так нельзя делать не в коем случаем, можно только так <a href="http://javascript.ru" id="respect" onclick="RightMessage.call(this);return false;">Ссылка</a> |
Цитата:
resp.onclick= function(){
RigthMessage(arg);
};
|
Спасибо большое )) а как насчёт 2-го вопроса?! Как же надёжно (точнее, правильно) получать this в теле функции для IE, после назначения этой функции через attachEvent?
И ещё один вопрос - если в HTML юзать <a href="http://javascript.ru" id="respect" onclick="RightMessage.call(this);return false;">Ссылка</a> то this указывает в функции на ссылку 100%... а если так <a href="http://javascript.ru" id="respect" onclick="RightMessage(this);return false;">Ссылка</a> то this передаётся в ф-ю просто как аргумент (кстати тогда нужно и функцию переписывать, чтоб она принимала параметр). По этому параметру можно и получить сам исходный объект... Правильно!? И насколько я понимаю здесь аргумент функции - не сам объект со всеми свойствами, методами и пр... а просто ссылка на него!? Вопрос №2 в силе... |
Цитата:
var methodType = "addEventListener" in window ? ["addEventListener", ""] : ["attachEvent", "on"];
elem[methodType[0]](methodType[1] + 'click', function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
// target и есть ссылка на элемент
}, false);
|
Цитата:
да и ещё!!! Забыл добавить описание ещё одной своей ошибки в ф-и WrongMessage...
function WrongMessage() {
var aid=this.id || window.event.srcElement.id;
alert(aid);
var aobj=this || window.event.srcElement;
alert(aobj.id);
return false;
}
Меня смутило, что в IE window.event.srcElement.id показывало ID ссылки, а window.event.srcElement "ЯКОБЫ" не ссылался на её объект... всё потому, что this.id = window.id = false, а window.event.srcElement.id = resp.id = true. В итоге: aid=resp.id и всё путём ))) ну, а про свой косяк в использовании такой конструкции в IE |
Цитата:
|
или вы про это?
Цитата:
|
Да-да )) я именно про этот e )))) Поправил свой предыдущий пост, дабы не смущать народ всякими ешками ))
Спасибо большое, devote )) |
| Часовой пояс GMT +3, время: 13:17. |