jquery - Can I use the browser back button for something else? -

i'm building website responsive design. on mobile devices, many sections of page hidden in "drawers", can revealed button.

because of close resemblance native phone apps, have noticed users use device's button close drawers, button instructs browser go previous page.

is there way intercept this? preferably on mobile devices only, have no intend on changing browser's button behavior across board.

i'm thinking like:

// call code when button pressed if( $( '.drawer' ).hasclass( 'open' ) ) {     // prevent browser going page     $( '.drawer' ).removeclass( 'open' ); } else {     // keep normal browser behavior } 

can done?

per request, here solution answer, although not solve particular issue.

my suggestion use native location.hash , hashchange event listener open , close elements allowing button same. uses default functionality , prevents need reload page every time drawer opened.

my demo below formatting , styles. important part javascript event listener. seems work using stackoverflow's snippet editor, in case: http://jsfiddle.net/jmarikle/jf1aqtdu/

window.addeventlistener('hashchange', function(){      var old;      if (old = document.queryselector('section.active')) {          old.classlist.remove('active');      }      if (old = document.queryselector('nav a.active')) {          old.classlist.remove('active');      }            if(location.hash !== '') {          var activedrawer = document.queryselector(location.hash.replace(/open-/, '')),              activenavlink = document.queryselector('[href="'+location.hash+'"]');          activedrawer.classlist.add('active');          activenavlink.classlist.add('active');      }  });

nav ul {      list-style-type: none;      margin: 0;      padding: 0;      background: #c55;      color: white;  }    nav ul li {      display: inline;  }    nav ul li {      display: inline-block;      padding: 1em;      color: inherit;      text-decoration: none;  }    nav ul li a:hover,  nav ul li a.active {      background: #a33;  }    section {      padding: 1em;      border-top: 1px solid #888;      border-bottom: 1px solid #000;      background: #555;      color: white;      display: none;  }  section.active {      display:block;  }  }

<nav>      <ul>          <li><a href="#open-about">about</a></li>          <li><a href="#open-contact">contact</a></li>          <li><a href="#open-test">test</a></li>      </ul>  </nav>  <section id="about">lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section>  <section id="contact">lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam</section>  <section id="test">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section>