What's going on with my JS

gistfile1.txt

So I've got this code

  var $tooltips = $('.tooltip__link');

  $tooltips.on('click touchstart', function(){
    var tooltip = $(this);
    tooltip.toggleClass('js-opened');
    return false;
  });

  $('body').on('click touchstart', function(){
      $tooltips.removeClass('js-opened');
  });

I'm using touchstart here as iOS doesn't seem to wanna work without it.

unfortunately

  $('body').on('click touchstart', function(){
      $tooltips.removeClass('js-opened');
  });

when tapping it invokes the form elements underneath the tooltip that's showing

doing this

  $('body').on('click touchstart', function(){
      $tooltips.removeClass('js-opened');
      return false;
  });

fixes this but it seems to hijack the page for any other click events.

Any ideas ?

You should also turn the main body event off when the tooltip isn't open to prevent the click-jacking:

var removeEvent = function (e) {
$tooltips.removeClass('js-opened');
$('body').off('click', removeEvent);
}

$tooltips.on('click touchstart', function(e){
   e.preventDefault();
    var tooltip = $(this);
    tooltip.toggleClass('js-opened');
    $('body').on('click', removeEvent);
  });