HTML > DOM > JavaScript > IE > БЪГОВЕ, Бъгове и бъгове ...
Автор |
|
stambentsetoВто, 30.03.10, 15:00 |
Здравейте програмисти и УЕБ дизайнери. Допитвам се до вас по следния въпрос: Може ли или не може да се създават динамично DOM бутони (BUTTON) със задаване на няколко 'Ивент-а' (onClick, OnMouseOver, OnMouseOut), но БЕЗ за се създава отделна функция за всеки отделен ивент? ЗАЩО ми трябва това: Бутоните които ще създавам се генерират от масив, който с течение на времето ще увеличава големината си т.е. след време, вероятно ще е адски голям. В особеностите на DOM подобни ивенти се създават чрез (в IЕ) .attachEvent('event', function); |
ОБАЧЕ именно function ми е проблем. Ако имам 100 бутона - как по дяволите да напиша за всеки един поотделно функция. А ако има и повече от един ивент? И по-лошо - много от функциите биха били еднотипни. Примерно: За момента си прилагам следните ивенти за всеки един бутон: onMouseOver= "this.style.color = 'red'" onMouseOut="this.style.color = 'black'" |
като напиша обаче: attachEvent('onмouseоver', this.style.color = 'red') |
и всичко отива по дяволите... След доста експерименти ОСВЕН че 'event'-а трябва да е само с малки букви, открих, че 'function' не възприема и параметри. т.е. следното също не ми върши работа: attachEvent('onмouseоver', function(param1, param2)) |
ИЛИ поне при IE 6 не сработва . И понеже МНОГО ме мързи да си блъскам главата за глупости - Ето и моментното решение, което засега върши работа: element.setAttribute("onClick", 'reagirai()'); // основната работна функция
element.setAttribute("onMouseOver", "this.style.color = 'red'"); // визуални шарении
element.setAttribute("onMouseOut", "this.style.color = 'black'");
AddtoDIV(foo,element); // създаване на елемента
|
Така си зареждам 'ивентите' като 'атрибути'. НО /адски голямо НО/ и това излиза, че е неприложимо, без следния 'Туик': function AddtoDIV(kade,kakvo){
//Append the element in page (in DIV).
kade.appendChild(kakvo);
kade.innerHTML += '<br>'; // -IE tweak for evading crappy set attributes
} |
Цялата работа е в .innerHTML, чрез което се излиза от DOM и се преминава към HTML съдържание. Без него ивентите не се активират и си остават безполезни атрибути. Същото това <BR> обаче ми се бърка в подредбата на съдържанието, и макар не е фатално, ми се ще да се избегне. И така! Предложения ? | | angelicstarВто, 30.03.10, 15:24 |
Ами тъпото е, че ІЕ не се оправя с разширяеми масиви /vectors/ в JS. Сещам се 1 начин ама е гаден. Да направиш всичко на Java като аплет. Там може на всеки елемент във вектора да присвоиш колко ти са кеф ивенти. Ако ще и вектор с вектори от ивенти. Ама и така няма да стане много динамично. При всяка промяна в ивентите трябва аплетът да се презарежда. | | insecteaterВто, 30.03.10, 16:49 |
Карам по смътни спомени, но няма ли начин да ползваш "this" в тялото на функцията, за да се обръщаш към "собственика" и? Би трябвало да ти свърши работа. | | phrozencrewВто, 30.03.10, 17:02 |
Я нарисувай концепцията с два бутона, че нещо не схванах идеята. И защо не използваш линкове с class="neshto_si" и да премахнеш поне 2 от събитията с мишката a, a:hover, a:active. | | stambentsetoВто, 30.03.10, 19:30 |
phrozencrew, както винаги си прав. Това с линковете беше едно от първите неща които приложих. Вършеше работа, докато не се наложи ивента onMouseOver да задейства повече от едно действие (спрямо смяната на стила предложението ти e напълно приложимо), примерно onMouseOver = "document.getElementById('infobar').innerHTML = 'Primeren nadpis'; this.style.color='red';" |
Оттам преминах на бутони тип <input type='button'>, но IE-то не рефрешваше class-a който им задавах. В крайна сметка се спрях на <BUTTON>, тъй като се ползваше само там и спокойно може да се зададе стайлшийт за конкретния елемент. ----------------------------------------------- insecteater и това го обмислям, но не съм взел окончателно решение. ----------------------------------------------- Концепцията е малко заплетена в моя случай, но ето по-опростен пример: Масива е могомерен, примерно нещо такова: var newArr = new Array ();
newArr[0] = new Array ("BTN", "Value 1", "action 1");
newArr[1] = new Array ("BTN", "Value 2", "action 2");
...
newArr[х] = new Array ("BTN", "Value х", "action х"); |
BTN - е данната, според която сравняваща функция ще насочва скрипта да изработва елемент BUTTON Value - е самото име на изработвания бутон Action - в случая е път към външен .JS файл който съдържа конкретни данни за последвала обработка Оттам: function MakeButton(mqsto){
var foo = document.getElementById(mqsto); // DIV-a кадето ще слагам елементи
var element = document.createElement("BUTTON");
for (i=0; i<= newArr.length; i++){
element.setAttribute("value", newarr[i][1].bold()); // текста на бутона
element.setAttribute("id", 'ime'+i); // id, за вслучай че трябва да премахна бутона
element.setAttribute("onClick", 'reagirai(какво точно да се случи,' + newArr[i][2] + ');');
element.setAttribute("onMouseOver", "this.style.color = 'red'"); // шарении
element.setAttribute("onMouseOut", "this.style.color = 'black'");
foo.appendChild(element); // Добавяне на самия бутон
foo.innerHTML += '<BR>'; //Вече споменатия Туик.
}
} |
Дотук ми се генерират бутоните с всичко което трябва да правят. <BR>-о ми върши работа, тъй като бутоните ми трябват един под друг. Задълбавайки из нови функции в скрипта обаче, ми възникнаха известни затруднения по подредбата и стайлшийта.... Просветна ми, че за да приложа същия туик, без да скапвам нещата ми трябва възможно най-незначителния HTML таг, за да не оказва влияние. ВОАЛА: - коментарите:<!-- tweak -->. един if (){ и да прави или <BR> или <!-- tweak--> и проблема избледнява. Въпроса ми обаче беше дали конструирането може, и ако да как, да се приложи само с DOM. ---------------------- angelicstar ако можех да програмирам на Javа вероятно нямаше да имам подобен проблем. За жалост обаче немога. | | phrozencrewВто, 30.03.10, 20:28 |
Аз, като едно много тъпо парче продължавам да се инатя, че: element.setAttribute("onMouseOver", "this.style.color = 'red'"); // шарении element.setAttribute("onMouseOut", "this.style.color = 'black'"); са напълно излишни. Особено ако не променяш ткста на бутона. Примерно... ъъъ я ги екстрактни тия двете в една директория и стартирай html-a: button_css.zipИ виж сорса на html-a. Има динамика, но няма и грам JavaScript. Ако променяш текста на бутоните, тогава става още по-лесно, но и с няколко kiB повече. Просто слагаш картинки за бекграунд на базата и на ховъра. Ако искаш ще ти направя един пример и с това. Аз съм на мнение, че onMouseOver и onMouseOut са едни от най-безсмислените и гадни функции на JavaScript. | | stambentsetoВто, 30.03.10, 23:14 |
phrozencrew спри да се инатиш. И аз съм НАПЪЛНО СЪГЛАСЕН с теб. ако можеш да накараш чрез CSS да направи това : OnMouseOver = "1.да смени стила // това го може 2. да изпише в обособено място (в случая document.getElementByID('infobar')) определен текст в зависимост от бутона 3. да зареди в мястото за "Хедър"-а на страницата друг специфичен текст "МНОГО МОЛЯ да ми дадеш един пример. Както споменах IE-то май има проблем с опресняването на класовете за стилове при динамично създавани елементи. Вероятно твоя подход ще се получи, НО в моя случай имам зададен вече стил за линкове, който не е препоръчително да променям. ВЪПРОСА! Конкретния въпрос на който се търси отговор е: МОЖЕ ЛИ да се постигне чрез DOM това: .attachEvent('onclick', function(param1, param2)) |
където всички бутони да се насочват към една основна функция, а чрез param1 и param2 да се извърши конкретно действие за специфичния бутон. ЗАЩОТО при мен не се получава. Може аз да съм в грешка, или да бъркам някъде, ама неще и неще. това със стила го давам само за пример, понеже се налага да имам няколко ивента на всеки бутон. | | insecteaterСря, 31.03.10, 09:33 |
Да, може. .attachEvent('onclick', function proxy() {tvoiatafunkcia(obj, param1, param2)}); |
Ако пращаш статични параметри, няма проблем. Това най вероятно обаче няма да ти свърши работа. Проблема всъщност е малко по-друг, но предполагам скоро ще го напипаш :) | | stambentsetoСря, 31.03.10, 10:10 |
insecteater омръзна ми да се занимавам с тези бъгове. Накарах го да тръгне, нали . Ще пробвам и с проксито, скоро, може би. Ако ти се занимава, ще съм благодарен да споделиш конкретно за проблема който споменаваш. В момента съм изнервен от ситуацията и ще се занимая с други отделни функционалности на скрипта ми. Ако сте се сетили вече, тези "бутонски" неволи са за формиране на меню. Да се занимая малко и със съдържанието . Може да открия 'Топлата вода'. | | phrozencrewСря, 31.03.10, 10:31 |
Ей това ти е решението за Mozilla - addEventListener: if(window.addEventListener){ // Mozilla, Netscape, Firefox
object.addEventListener('mouseover', testevent, false);
object.addEventListener('click', testeventtt, false);
} else { // IE
object.attachEvent('onmouseover', testevent);
object.attachEvent('onclick', testeventtt);
} |
Примерче: event_test.html | | Коментар |