VPF::обработка событий в IE7 - Форум программистов

Rimch

Дата 9.6.2008, 12:54 (ссылка)

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

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 43
Регистрация: 23.6.2007

Репутация: 1
Всего: 3

Пишу горизонтальное меню на основе дивов. Но сталкнулся с проблемой все мои скрипты не работают под IE7. Метод document.getElementById(ID) не срабатывает, что делать? smile

Товарищи программеры протестируйте мой скрипт в разных браузерах, может кто какой касак найдет!
В прикрепленном файле исходный код

Добавлено через 2 минуты и 50 секунд
вот файл

Присоединённый файл ( Кол-во скачиваний: 4 )

Menu.rar 1,71 Kb

Rimch

Дата 9.6.2008, 13:48 (ссылка)

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

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 43
Регистрация: 23.6.2007

Репутация: 1
Всего: 3

Обработка событий menu.js

Код


var menuitem=0;
var submenustyle='None';
var click_=0;

//=================================== обработка событий главного меню ======================================

//1. отмена выделения пункта меню 
function msMenuOut(this_){this_.style.color='menutext';} 

//2. обработка события получения фокуса пунктом меню
function msMenuOver(this_)            
  {if (menuitem!=0) 
     { 
       menuitem.style.color='menutext';
       if ($(menuitem.id+'_'))$(menuitem.id+'_').className='None';
     }
  menuitem=this_;
  menuitem.style.color='Blue';
  if ($(menuitem.id+'_'))
  {
     $(menuitem.id+'_').className=submenustyle;
     $(menuitem.id+'_').style.top=20;
     $(menuitem.id+'_').style.left=menuitem.offsetLeft;
  }
}
  
//3. обработка события Mouse Down!
function msMenudown(this_)
{if (this_.className=='MainMenu') 
 {
     if ($(menuitem.id+'_').className=='None') submenustyle='SubMenu'; else submenustyle='None';
     $(menuitem.id+'_').className=submenustyle;
     click_++;
  }
 }
 
//4. щелчек по области 
function msMenuClick(this_)
{ if (this_.className!='MainMenu')
  if ($(menuitem.id+'_'))
     { 
       submenustyle='None';
       $(menuitem.id+'_').className=submenustyle; 
       click_=0;
     }
}
//======================================обработка событий подменю ==========================================

function  msMenuItemOver(this_){this_.className='MenuItemOn';} //выделение подпункта меню

function  msMenuItemOut(this_){this_.className='MenuItemOff';} //отмена выделение подпункта меню

Таблица стилей Menu.css

Код


.Menu
 {position:absolute;
  width:100%;
  height:18px;
  padding:2px;
  background-color:menu;
  color:menutext;
  border-bottom: 1px solid  buttonface;
  position:absolute;
  left:0;
  top:0;  
 }
.MainMenu
 {padding:4px;
  color:menutext;
  font:menu;
  cursor:default;
  border:0 solid #000000;
  }
.line{margin:4px;} 
.None{display:none;} 
.SubMenu
  {position:absolute;
   padding:0px;
   font:menu;
   background-color:window;
   border:2px ridge window;
   display:block;
   line-height: 150%;
   cursor:default;
   z-index:5
  }
.MenuItemOn   
  {background-color:highlight;
  width:100%;
  color:highlighttext;
 }
.MenuItemOff  
 {background-color:window;
 width:100%;
 color:menutext;
 }

Исходный HTML код Main.html

Код


<html>
<LINK rel="stylesheet" href="menu.css" type="text/css">
<script src="menu.js"></script>
<script>
$= function(id){return document.getElementById(id)};
function msover(event) {
if (event)
  {if (navigator.appName=='Microsoft Internet Explorer')
    {    if (event.srcElement.className=='MainMenu') msMenuOver(event.srcElement);
     else if (event.srcElement.className=='MenuItemOff') msMenuItemOver(event.srcElement);
     }
  else {  if (event.target.className=='MainMenu') msMenuOver(event.target);
     else if (event.target.className=='MenuItemOff') msMenuItemOver(event.target);
     }
  }       
}
function msout(event) {
if (event)
  {if (navigator.appName=='Microsoft Internet Explorer')
    {    if (event.srcElement.className=='MainMenu') msMenuOut(event.srcElement);
     else if (event.srcElement.className=='MenuItemOn') msMenuItemOut(event.srcElement); 
    }
  else {  if (event.target.className=='MainMenu') msMenuOut(event.target);
    else if (event.target.className=='MenuItemOn') msMenuItemOut(event.target); 
     }
  }       
}
function msdown(event)
{if (event)
   {if (navigator.appName=='Microsoft Internet Explorer') msMenudown(event.srcElement);else msMenudown(event.target);}; 
}
function msclick(event)
{if (event)
   {if (navigator.appName=='Microsoft Internet Explorer') msMenuClick(event.srcElement);else msMenuClick(event.target);} 
}
function N_Click(text)
{alert('выбран пункт '+text);}
</script>

<body name='body' id='body' style="margin:0px;background-color:appworkspace;" 
    onmouseover = 'msover(event)'
    onmouseout  =  'msout(event)'
    onmousedown = 'msdown(event)'
    onclick     ='msclick(event)'
    >
<script>
if (navigator.appName!='Microsoft Internet Explorer')
{document.addEventListener("mouseover", msover , true);
 document.addEventListener("mouseout" , msout  , true);
 document.addEventListener("mousdown" , msdown , true); 
 document.addEventListener("click"    , msclick, true);}
</script>
<!------------------------------------------------------------  Главное меню ------------------------------------------------------------->
 <div class='Menu'>
 <span class='MainMenu' name='N1' id='N1'> Файл &nbsp   </span>
 <span class='MainMenu' name='N2' id='N2'> Правка &nbsp </span>
 <span class='MainMenu' name='N3' id='N3'> Поиск &nbsp  </span>
 <span class='MainMenu' name='N4' id='N4'> ? &nbsp    </span>
 </div>
 <div  class='None' name='N1_' id='N1_' style='width:100px'>
     <div class='MenuItemOff' name='N1_1' id='N1_1' onclick='N_Click(this.id)'>&nbsp Открыть      </div>
     <div class='MenuItemOff' name='N1_2' id='N1_2' onclick='N_Click(this.id)'>&nbsp Сохранить    </div>
     <hr  class='line'>
     <div class='MenuItemOff' name='N1_3' id='N1_3' onclick='N_Click(this.id)'>&nbsp Выход        </div>
 </div>
 <div class='None'  name='N2_' id='N2_' style='width:100px'>
     <div class='MenuItemOff' name='N2_1' id='N2_1' onclick='N_Click(this.id)'>&nbsp Отмена       </div>
     <div class='MenuItemOff' name='N2_2' id='N2_2' onclick='N_Click(this.id)'>&nbsp Повтор       </div>
     <hr  class='line'>
     <div class='MenuItemOff' name='N2_3' id='N2_3' onclick='N_Click(this.id)'>&nbsp Вырезать     </div>
     <div class='MenuItemOff' name='N2_4' id='N2_4' onclick='N_Click(this.id)'>&nbsp Копировать   </div>
     <div class='MenuItemOff' name='N2_5' id='N2_5' onclick='N_Click(this.id)'>&nbsp Вставить     </div>
 </div>
 <div class='None'  name='N3_' id='N3_' style='width:100px'>
     <div class='MenuItemOff' name='N3_1' id='N3_1' onclick='N_Click(this.id)'>&nbsp Поиск...     </div>
     <div class='MenuItemOff' name='N3_2' id='N3_2' onclick='N_Click(this.id)'>&nbsp Замена...    </div>
     <hr class='line'>
     <div class='MenuItemOff' name='N3_3' id='N3_3' onclick='N_Click(this.id)'>&nbsp Переход к... </div>
 </div>
 <div class='None'  name='N4_' id='N4_' style='width:100px'>
    <div class='MenuItemOff' name='N4_1' id='N4_1' onclick='N_Click(this.id)'>&nbsp Помощь        </div>
     <hr class='line'>
     <div class='MenuItemOff' name='N4_2' id='N4_3' onclick='N_Click(this.id)'>&nbsp О программе...</div>
</div>
<!------------------------------------------------------------  Главное меню ------------------------------------------------------------->
<!----------------------------- далее  тело сайта --------------------------->
</body>
</html>

IDVsbruck

Дата 9.6.2008, 19:37 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 8
Всего: 22

А чего ж Оно должно у тебя работать, если ты его сделал исключительно под модель событий оперЫ и ФуФу?
Обработчик для кроссбраузерности делают примерно так:

Код

function msover(_event) {
      if (!_event) _event = event;
      //и дальше работает с _event, так как event - зарезервированное слово
}

Ghirik

Дата 9.6.2008, 23:40 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

Мне вот так нравится: smile

Код


function msover(e) {
      e = e || event;
 }

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

Отдадим всё клиенту, пускай его машина мучается...

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