За последние 24 часа нас посетили 17846 программистов и 1683 робота. Сейчас ищут 849 программистов ...

Создаем context menu

Тема в разделе "JavaScript и AJAX", создана пользователем ??? Соловьев Е ш326, 8 сен 2014.

  1. Доброго времени суток, дорогие форумчане.

    Решил организовать на сайте собственное контекстное меню, чтоб было красиво, удобно и никакой лишней писанины.
    Разметка меню выглядит так:
    Код (Text):
    1.         <div class='context_menu' id='context_menu'>
    2.             <div class='item_list' id='context_item_list'>
    3.                 <!--<div class='item ' id=''>пункт меню</div>-->
    4.             </div>
    5.         </div>
    А вот этим кодом на JS мы управляем меню
    Код (PHP):
    1. if(window.adm==1){
    2.     var a=document.querySelectorAll('.contact .header .str');
    3.     for(var i=0;i<a.length;i++){
    4.         a[i].addEventListener('contextmenu',function(e){            
    5.             context_open(e);
    6.             create_context(1,'f1',function(){
    7.                 alert('f1 ok');
    8.             });
    9.             create_context(2,'f2',function(){
    10.                 alert('f2 ok');
    11.             });
    12.             create_context(3,'f3',function(){
    13.                 alert('f3 ok');
    14.             });
    15.         },false);
    16.     }
    17. }
    18. function context_open(e){
    19.     e.preventDefault();
    20.     scout.$('context_menu').style.display='block';
    21.     scout.$('context_menu').style.top= e.clientY+scrollY-14+'px';
    22.     scout.$('context_menu').style.left=e.clientX+scrollX-14+'px';
    23.     window.addEventListener('mousemove',function zxc(e){
    24.         var el=scout.$('context_menu');
    25.         if((e.clientX<el.offsetLeft)||(e.clientY<el.offsetTop)||(e.clientX>el.offsetLeft+el.offsetWidth)||(e.clientY>el.offsetTop+el.offsetHeight)){
    26.             window.removeEventListener('mousemove',zxc,false);
    27.             scout.$('context_menu').style.display='none';
    28.             scout.$('context_item_list').innerHTML='';
    29.         }
    30.     },false);
    31. }
    32. function create_context(i,str,funct){
    33.     scout.$('context_item_list').innerHTML+="<div class='item' id='context_item"+i+"'>"+str+"</div>";
    34.     scout.$('context_item'+i).addEventListener('click',function(){funct();},false);
    35. } 
    Вот ссылочка на cssdeck

    Все вроде хорошо. Но тут меня поджидала коварная неприятность.
    Дело в том, что функция, создающая пункт меню create_context в результате задает обработку события click только последнему пункту, а для всех предыдущих обработчик стирается.
    В общем сутки сижу ломаю голову что не так.

    Буду очень благодарен, если поможете разобраться в проблеме. =)
     
  2. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.521
    Симпатии:
    504
    Под вечер туго соображаю, поэтому не очень пытался искать у вас ошибки, а сделал небольшую модификацию кода, а то как-то совсем грустно стало. В общем, посмотрите, поиграетесь, удалите лишнее или добавите своё...
     
  3. А зачем вот тут
    Код (Text):
    1. if(createContentMenu(output, 'line')){
    2. ...
    3. function createContentMenu(el, str){
    str?
     
  4. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.521
    Симпатии:
    504
    Не нужно это. Просто перед этим, я думал сделать передачу текстовых значения для пунктов меню, но потом понял, что это как бы не имеет смысла, а убрать забыл.
     
  5. Спасибо большое. Все работает =)