单击时禁用 JavaScript mouseenter/mouseleave

Question

对于我的网站，我有一个图像，在 mouseenter/mouseleave 上会更改它的源并切换一个 gylphicon。我想这样做，如果单击 glypicon，则 mouseenter/mouseleave 函数不再运行。单击时，图像不应在悬停时更改状态，并且只能在单击时更改。

我的 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>

我的 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

尝试将if(hoverState) 放在函数中：

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;
}