Mobile Fix

The click and hover events are called simultaneously, made for stackoverflow

by Martiens Kropff

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="outer">
  <div id="border">
    <div id="inner">

    </div>
  </div>
</div>

CSS

#outer {
  padding: 50px;
  width: 200px;
  height: 200px;
  background-color: #FFFFFF;
}

#border {
  border: 1px solid black;
  width: 100%;
  height: 100%;
}

#inner {
  display: none;
  width: 100%;
  height: 100%;
  background-color: #CC0000;
}

JavaScript

var display = $("#inner").css("display");

function detectMobile() {
  try {
    document.createEvent("TouchEvent");
    return true;
  } catch (e) {
    return false;;
  }
}

if (!detectMobile()) {
  $("#outer").hover(function() {
    show();
  }, function() {
    hide();
  });
} else {
  $('#outer').data('status', 'hidden');
  $('#outer').on('click', function() {
    if($('#outer').data('status') === 'hidden'){
    	$("#inner").css('display', 'block');
      $('#outer').data('status', 'unclicked');
    } else if ($('#outer').data('status') === 'unclicked'){
    	alert('hello');
      $('#outer').data('status', 'clicked');
    } else {
    	$("#inner").css('display', 'none');
      $('#outer').data('status', 'hidden');
    }
  });
}

function show() {
  $("#inner").css('display', 'block');
  $("#inner").bind('click', function() {
    alert('hello');
  });
}

function hide() {
  $("#inner").css('display', 'none');
  $("#inner").off('click');
}