如果onclick被按下，阻塞mouseout事件监听器

block mouseout event listener if onclick is pressed

本文关键字：阻塞 mouseout 事件 监听器 onclick 如果      更新时间：2023-09-26

我正在尝试3种不同的鼠标动作(mouseout, mouseenter和onclick)，如果用户单击图像，那么mouseout事件应该被阻止。

<div class="side-thumbnail">
 <img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-bw.png" onmouseover="this.src='http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-active.png'" onmouseout="this.src='http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-bw.png'" alt="face" class="small-faceHit" data-id="firstpeople"> <br>
 <img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/08Georg-Front.png" onmouseover="this.src='http://dev.kis-com.ch/wp-content/uploads/2015/08/08Georg-Front-Active.png'" onmouseout="this.src='http://dev.kis-com.ch/wp-content/uploads/2015/08/08Georg-Front.png'" alt="face" class="small-faceHit" data-id="secondpeople"> <br>
.................
</div>
你可以在这里看到完整的代码

您可以实现这一点，而无需为每个项目使用两个图像，但这将需要一点javascript。

这里基本上，你只加载了彩色图像，并应用CSS滤镜使图像看起来像灰度

$(document).on('click', '.greyscale', function(){
    $('.side-thumbnail img').each(function(){
        if(!$(this).hasClass('greyscale'))
        {
            $(this).addClass('greyscale');
            $(this).removeClass('selected');
        }
    });
    $(this).removeClass('greyscale');
    $(this).addClass('selected');
});
img{width:150px;}
.greyscale{
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
.greyscale:hover, .selected{
    -webkit-filter: grayscale(0%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="side-thumbnail">
    <img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-active.png" alt="face" class="small-faceHit greyscale" data-id="firstpeople"> <br>
   
    <img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/08Georg-Front-Active.png" alt="face" class="small-faceHit greyscale" data-id="secondpeople"> <br>
    <img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/02-Naomi-Front-Active.png" alt="face" class="small-faceHit greyscale" data-id="thirdpeople">
</div>

一个使用CSS过滤器的干净的基于CSS的解决方案。

https://jsfiddle.net/f1b3ugo5/

CSS: 

img{width:150px;}
img.active, img.inactive:hover {
  filter:none;
-webkit-filter: none;
-moz-filter: none;
-ie-filter: none;
-o-filter: none;
}
img.inactive {
filter:url("data:image/svg+xml;utf8,<svg version='"1.1'" xmlns='"http://www.w3.org/2000/svg'"><filter id='"grayscale'"><feColorMatrix type='"matrix'" values='"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'"/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ie-filter: grayscale(100%);
-o-filter: grayscale(100%);
}

JS: 

'use strict';
var add_events = function( img, opts ){
  this.image = img;
  this.setup_listener();
  return this;
}
add_events.prototype.activate = function(){
    this.image.classList.remove('inactive');
    this.image.classList.add('active');
};
add_events.prototype.deactivate = function(){
    this.image.is_active = false;
    this.image.classList.remove('active');
    this.image.classList.add('inactive');
};
add_events.prototype.setup_listener = function(){
  var _this = this;
  this.image.addEventListener('click',function(e){
    add_events.deactivate_all( _this );
    if( this.is_active ){ 
    _this.deactivate();
    }
    else{ 
    this.is_active = true;
    _this.activate();
    }
  },false);
};
add_events.deactivate_all = function( current ){
  for( var i = 0; i < holder.length; ++i ){
    if(holder[i]===current){}
    else{ holder[i].deactivate(); }
  }
};
var holder = [], images = document.querySelectorAll( '.small-faceHit' );
for( var i = 0; i < images.length; ++i ){
  holder.push(new add_events( images[i], {}) );
}
HTML: 

<div class="side-thumbnail">
<img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-active.png" alt="face" class="small-faceHit inactive" id="toggle-image" data-id="firstpeople">
<img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-active.png" alt="face" class="small-faceHit inactive" id="toggle-image" data-id="firstpeople">
<img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-active.png" alt="face" class="small-faceHit inactive" id="toggle-image" data-id="firstpeople">
<img src="http://dev.kis-com.ch/wp-content/uploads/2015/08/andreas-front-active.png" alt="face" class="small-faceHit inactive" id="toggle-image" data-id="firstpeople">
</div>
相关文章：