Функция остановки работает, когда div имеет определенный класс

Question

В моем мобильном приложении есть меню боковой панели/боковой панели, которое открывается, когда вы нажимаете значок маленького меню.

когда боковая панель открыта, я предотвращаю прокрутку с помощью eventmove eventlistener и e.preventDefault();

Я также хочу, чтобы любые блокировки, доступные с помощью нажатия на странице, не могли запускать прикрепленные функции (часть страницы все еще отображается, когда боковая панель открыта, очень похожая на приложение facebook).

я мог проверить, если боковая панель открыта в каждой функции, как:

if(! $('#main-wrapper').hasClass('show-right-menu')){ 
    // run code 
} 

но есть много функций, я должен был бы добавить к этому, есть лучший способ?

Answer 1

В этой ситуации я хотел использовать наложение DIV, вы можете также использовать DIV исчезать содержание, которое выглядит хорошо.

В основном вы закрываете свой контент div и слушаете события на этом div, которые затем закрывают меню.

Вот краткий пример, который вы можете надеяться получить идею от:

http://jsfiddle.net/vSbcQ/5/

<div class="page"> 
    <div class="header"> 
     <div class="menu-button"> 
      menu 
     </div> 
    </div> 
    <div class="content"> 
     <div class="overlay"></div> 
     Lots of wonderful amazing content 
    </div> 
    <div class="menu"> 
     <ul> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
     </ul> 
    </div> 
</div> 

Answer 2

Вы можете использовать .addEventListener и установить третий параметр на true. Это запустит его перед любыми другими слушателями click.

Пример:

document.addEventListener('click', function(e) { 
    if(!$('#main-wrapper').hasClass('show-right-menu')) return false; // we don't need this if the menu is closed 
    if(!$(e.target).parents(".right-menu").length) { // if the target is not located in the menu, we cancel the click 
     e.stopPropagation(); 
    } 
}, true); 

Вот быстрый живой пример http://jsfiddle.net/Hngvx/