VPF::Передача параметра обработчику события в IE

EgoBrain

Дата 26.2.2013, 09:45 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 537
Регистрация: 23.3.2008
Где: Комната

Репутация: нет
Всего: 2

Заранее извините если название темы не отражает суть вопроса.

Задача: перебрать ячейки строки (которую выбрал пользователь) таблицы и передать содержащийся в них текст.

Нашел пример, применил у себя, как всегда затык на IE, нет метода document.getElementsByClassName() и addEventListener(), но есть альтернативы: написать свой getElementsByClassName и attachEvent вместо addEventListener.
Алгоритм следующий: в первой ячейке таблицы содержится div, к которому и приписывается обработчик, обработчику передается ссылка на этот обеъкт (div), далее в обработчике уже непосредственно перебираются ячейки выбранной строки. Проблема в том, что в IE в обработчик передается не то что нужно, либо я с переданным объектом неправильно работаю..

Код:

Код


<table>
<tr align="center" class="row"><td><div class="msg_edit">1</div></td><td>518</td><td>2013-02-11</td><td>2013-02-20 12:17:49</td><td></td>
                <td>some text</td><td>sometext</td></tr>
<tr align="center" class="row"><td><div class="msg_edit">2</div></td><td>520</td><td>2013-02-21</td><td>2013-02-25 12:00:58</td><td></td>
                <td>some text</td><td>Вася Пупкин!</td></tr>
</table>

Код


//------------------------------------------------------------Костыль для IE--------------------------------------------------------------------
if (typeof document.getElementsByClassName!='function') 
                    {
                        document.getElementsByClassName = function() {
                            var elms = document.getElementsByTagName('*');
                            var ei = new Array();
                            for (i=0;i<elms.length;i++) {
                                if (elms[i].getAttribute('class')) {
                                    ecl = elms[i].getAttribute('class').split(' ');
                                    for (j=0;j<ecl.length;j++) {
                                        if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                                            ei.push(elms[i]);
                                        }
                                    }
                                } else if (elms[i].className) {
                                    ecl = elms[i].className.split(' ');
                                    for (j=0;j<ecl.length;j++) {
                                        if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                                            ei.push(elms[i]);
                                        }
                                    }
                                }
                            }
                            return ei;
                        }
                    }
//----------------------------------------------------------------------------------------------------------------------------------------------------

var lst = document.getElementsByClassName('msg_edit');  //--Получить дивы, по нажатию на которые указывается выбранная строка--

for(var i = 0; i < lst.length; i++)  //--Перебрать полученные дивы, задать обработчик события--
                    {
                        if("addEventListener" in lst[i])
                        { 
                           //--для нормальных браузеров-- 
                           lst[i].addEventListener("click", function(){linkOnClick(this);}, false); 
                        }
                        else if("attachEvent" in window)
                             { 
                               //--для IE-- 
                                lst[i].attachEvent("onclick", function(){linkOnClick(this);}); 
                          }    
                    }

function linkOnClick(node)
{
      alert(node);
}

Остальные браузеры выдают [object HTMLDivElement] (пробовал в firefox и opera), IE дает [object], ну соответсвенно с этим [object] я не могу сделать нужных мне действий, даже tagName получить.

И на всякий случай, так перебираю ячейки строки таблицы:

Код


function linkOnClick(node)
{
    $(node).parent().parent().find('td').each(function(){alert($(this).html())});
}

Как заставить работать в IE?

Это сообщение отредактировал(а) EgoBrain - 26.2.2013, 09:49

Amphiluke

Дата 26.2.2013, 19:10 (ссылка)

(голосов:1)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112

Это известная особенность IE: в обработчиках, добавленных методом attachEvent, ключевое слово this указывает не на объект, зарегистрировавший обработчик, а на глобальный объект. Можно обойти проблему при помощи дополнительного замыкания.

Код


lst[i].attachEvent("onclick", (function (lst) { return function() { linkOnClick(lst); }; })(lst[i]));

EgoBrain

Дата 27.2.2013, 01:31 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 537
Регистрация: 23.3.2008
Где: Комната

Репутация: нет
Всего: 2

Цитата(Amphiluke @ 26.2.2013, 19:10)

Код


lst[i].attachEvent("onclick", (function (lst) { return function() { linkOnClick(lst); }; })(lst[i]));

Спасибо, помогло! smile

А почему нельзя передать элемент в обработчик обычным способом?

Код


lst[i].attachEvent("onclick", function(){linkOnClick(lst[i]);});

Aliance

Дата 27.2.2013, 10:18 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Цитата(EgoBrain @ 27.2.2013, 02:31

)

А почему нельзя передать элемент в обработчик обычным способом?

потому что тогда не создается замыкание

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »