Question

当我在我正在使用的图像中拖动元素时遇到闪烁问题时，我正在为一个项目开发快速笔。不确定这里发生了什么，当你最初加载笔并第一次将它翻过来时，问题似乎不会发生，但在此之后它开始出现问题。

Snippet Demo：

＆＃13;

$(document).bind('mousemove', function(e){
    $('.tagger').css({
       left:  e.pageX - 55,
       top:   e.pageY - 55
    });
});

$('#crowd').hover(function(){
  $('.tagger').show();
});

$('#crowd').mouseleave(function(){
  $('.tagging').attr('class', 'tagger');
  $('.tagger').hide();
});

$('#crowd').click(function(){
  $('.tagging').attr('class', 'tagger');
});

$('.tagger').click(function(){
  $('.tagger').attr('class', 'tagging');  
});

$(document).on('click', '.tagging li', function(){
  alert($(event.target).text());
});

＆＃13;

.tagger {
  top: 0px;
  left: 0px;
  position: absolute;
  z-index: 3;
}

.tagger .frame {
  position: relative;
  height: 100px;
  width: 100px;
  padding: 0px;
  border: 5px;
  border-style: solid;
  border-color: red;
}

.tagger .name {
  display: none;
  position: relative;
  top: -5px;
  height: 90px;
  width: 90px;
  padding: 5px;
  border: 5px;
  border-style: solid;
  border-color: red;
  background-color: white;
}

.tagger .name ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  display: inline-block;
}







.tagging {
  position: absolute;
  z-index: 3;
}

.tagging .frame {
  position: relative;
  height: 100px;
  width: 100px;
  padding: 0px;
  border: 5px;
  border-style: solid;
  border-color: red;
}

.tagging .name {
  position: relative;
  top: -5px;
  height: 90px;
  width: 90px;
  padding: 5px;
  border: 5px;
  border-style: solid;
  border-color: red;
  background-color: white;
}

.tagging .name ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img id="crowd" src="https://s3.amazonaws.com/viking_education/web_development/web_app_eng/photo_tagging_small.png" height="600">
</div>
  
<div class="tagger">
  <div class="frame"></div>
  
  <div class="name">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Fork</li>
      <li>Fyve</li>
    </ul>
  </div>
  
</div>

＆＃13;

$(document).bind('mousemove', function(e){
    $('.tagger').css({
       left:  e.pageX - 55,
       top:   e.pageY - 55
    });
});

$('#crowd').hover(function(){
  $('.tagger').show();
});

$('#crowd').mouseleave(function(){
  $('.tagging').attr('class', 'tagger');
  $('.tagger').hide();
});

$('#crowd').click(function(){
  $('.tagging').attr('class', 'tagger');
});

$('.tagger').click(function(){
  $('.tagger').attr('class', 'tagging');  
});

$(document).on('click', '.tagging li', function(){
  alert($(event.target).text());
});

Answer 1

悬停效果考虑光标，实际上你正在用光标移动一个元素，所以发生了什么：

您从.tagger元素内部开始，一切正常，因为光标位于.tagger元素上。 #crowd上没有任何活动，因为光标从未触及/悬停#crowd 直到现在。
点击或执行将光标移至#crowd上的内容后，您会触发悬停效果，这意味着如果您离开，则会触发 mouseleave！

因此，您再次悬停在元素.tagger上，然后按预期触发 mouseleave 。

元素消失（因为写在mouseleave处理程序中的内容），光标现在在#crowd上，你再次触发悬停！

元素.tagger再次出现，光标在其上，您触发#croud的 mouseleave ，依此类推......

闪烁是无限序列（4）（5）（4）（5）（4）......

要解决此问题，您可以更改逻辑，如下所示。无需应用隐藏/显示功能，您只需将图像和.tagger元素包装在同一个包装器中并应用overflow:hidden，然后只保留点击事件。

以下是完整的代码（我将图片缩小，以便我们可以在简化的代码段中看到它）

＆＃13;
＆＃13;
$(document).bind('mousemove', function(e){ $('.tagger').css({ left: e.pageX - 55, top: e.pageY - 55 }); }); $('#crowd').hover(function(){ $('.tagging').attr('class', 'tagger'); }); $('.tagger').click(function(){ $('.tagger').attr('class', 'tagging'); }); $(document).on('click', '.tagging li', function(){ alert($(event.target).text()); });
＆＃13;
.tagger { top: 0px; left: 0px; position: absolute; z-index: 3; } .tagger .frame { position: relative; height: 100px; width: 100px; padding: 0px; border: 5px; border-style: solid; border-color: red; } .tagger .name { display: none; position: relative; top: -5px; height: 90px; width: 90px; padding: 5px; border: 5px; border-style: solid; border-color: red; background-color: white; } .tagger .name ul { list-style: none; padding: 0px; margin: 0px; display: inline-block; } .tagging { position: absolute; z-index: 3; } .tagging .frame { position: relative; height: 100px; width: 100px; padding: 0px; border: 5px; border-style: solid; border-color: red; } .tagging .name { position: relative; top: -5px; height: 90px; width: 90px; padding: 5px; border: 5px; border-style: solid; border-color: red; background-color: white; } .tagging .name ul { list-style: none; padding: 0px; margin: 0px; display: inline-block; } .container { overflow:hidden; position:relative; display:inline-block; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <img id="crowd" src="https://s3.amazonaws.com/viking_education/web_development/web_app_eng/photo_tagging_small.png" width='400' height="300"> <div class="tagger"> <div class="frame"></div> <div class="name"> <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Fork</li> <li>Fyve</li> </ul> </div> </div> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您不断重复hide()和show() .tagger。 mouseleave隐藏:hover次展示。

有两种方法可以解决这个问题：

将鼠标悬停效果移到#crowd .hover()
中
- 这使得运动有点不寒而栗
- 请参阅此笔enter link description here
删除.delete()处理程序中的.mouseleave来电

另外，注意：jQuery .hover()方法需要两个回调： 1. mouseenter 2.对于mouseleave

所以代码也可以在这方面稍作改动。

Answer 3

你假设.tagger只是你画的边界。实际上，那里有一个看不见的盒子。隐形框位于#crowd之上。当.tagger加载时，你不再在#crowd上空盘旋，你正徘徊在.tagger上，它停留在#crowd上。

要解决此问题，您可以将.tagger从鼠标周围的一个大盒子更改为4个瘦小的盒子，这样鼠标下方就没有任何内容了。

不需要的HTML元素闪烁

3 个答案: