Disable JavaScript mouseenter/mouseleave on click

Question

For my site, I have an image that on mouseenter/mouseleave changes it's source and toggles a gylphicon. I want to make it so that if the glypicon is clicked, the mouseenter/mouseleave function no longer operates. Upon click, the image shouldn't change state on hover and should only be able to change on click.

My HTML:

 <div id="mySplash1Mobile" class="carousel-splash slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img/index-splash/1main.jpg" onmouseenter="hover1(this);" onmouseleave="unhover1(this);" id="ImageButton1" width="100%">
    </div>
    </div>
    <a class="glyphicon glyphicon-triangle-bottom glyphicon-read-more" href="javascript:click1();" id="GlyphiconButton1">
      <span class="sr-only">More</span>
    </a>
  </div>

My JavaScript: var hoverState = true;

//Image Hover Blur
if (hoverState == true)
{
  function hover1(element) {
      element.setAttribute('src', 'img/index-splash/1blur.jpg');
      $('#GlyphiconButton1').toggleClass("glyphicon-triangle-top");
  }
  function unhover1(element) {
      element.setAttribute('src', 'img/index-splash/1main.jpg');
      $('#GlyphiconButton1').toggleClass("glyphicon-triangle-top");
  }

//Image Glyphicon Click Read More
var image_tracker1 = 'main';

function click1() {
  var image = document.getElementById('ImageButton1');
  if(image_tracker1=='main'){
    image.src = 'img/index-splash/1blur.jpg';
    $('#GlyphiconButton1').toggleClass("glyphicon-triangle-top");
    image_tracker1 = 'blur';
  }else{
    image.src = 'img/index-splash/1main.jpg';
    $('#GlyphiconButton1').toggleClass("glyphicon-triangle-top");
    image_tracker1 = 'main';
  }
  hoverState = false;
}

Answer 1

Try to place if(hoverState) inside the functions:

var hoverState = true;

//Image Hover Blur
function hover1(element) {
   if (hoverState) {
      element.setAttribute('src', 'img/index-splash/1blur.jpg');
      $('#GlyphiconButton1').toggleClass("glyphicon-triangle-top");
   }
}

function unhover1(element) {
   if (hoverState) {
      element.setAttribute('src', 'img/index-splash/1main.jpg');
      $('#GlyphiconButton1').toggleClass("glyphicon-triangle-top");
   }
}

//Image Glyphicon Click Read More
var image_tracker1 = 'main';

function click1() {
  var image = document.getElementById('ImageButton1');
  if(image_tracker1=='main'){
    image.src = 'img/index-splash/1blur.jpg';
    $('#GlyphiconButton1').toggleClass("glyphicon-triangle-top");
    image_tracker1 = 'blur';
  }else{
    image.src = 'img/index-splash/1main.jpg';
    $('#GlyphiconButton1').toggleClass("glyphicon-triangle-top");
    image_tracker1 = 'main';
  }
  hoverState = false;
}