javascript - 不需要的 HTML 元素闪烁

Question

当我在使用的图像上拖动元素时遇到闪烁问题时，我正在为一个元素开发一支快速笔。不太确定这里发生了什么，当您最初加载笔并第一次在其上平移时似乎没有出现问题，但之后它开始出现故障。

Link to Pen.

片段演示:

$(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());
});

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

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

$(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

悬停效果考虑了光标，实际上您正在使用光标移动一个元素，所以发生的事情是这样的:

1. 您从 .tagger 元素开始，一切正常，因为光标位于 .tagger 元素上。 #crowd 上没有任何事件，因为光标从未触及/悬停在 #crowd 直到现在。

2. 一旦您点击或执行某些操作将光标置于 #crowd 上，您就会触发悬停 效果，这意味着如果您离开，您将触发 < strong>鼠标离开!

3. 因此，您再次将鼠标悬停在元素 .tagger 上，并按预期触发了 mouseleave。
4. 元素消失(因为 mouseleave 的处理程序中写入的内容)，光标现在位于 #crowd 上，您再次触发悬停!
5. 元素 .tagger 再次出现，光标在上面，你触发 #croud 的 mouseleave 等等......

闪烁是无穷序列(4)(5)(4)(5)(4)...

---

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

这是完整的代码(我把图片变小了所以我们可以在缩减的片段中看到它)

$(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());
});

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

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