Question

我有一个用Bootstrap构建的页面和带有图像的jQuery，我用hover和mousemove方法跟踪鼠标移动。然后我在图像顶部添加标记，标记精确的X和Y坐标。

这些标记有一个关闭div，用于删除单击的标记。问题是，当我点击关闭div时，它会关闭标记div，但点击会生成另一个标记，其中点击发生。

当悬停在重叠标记上时，如何停止或暂停悬停，以便它不会创建另一个标记？它不应该自动发生，因为现在焦点在标签上？

这是复制的问题，我用Bootstrap显示它。我正在使用jQuery 1.9.0和Bootstrap 3。

CSS

<style type="text/css">
.tempSpot {
    color: #FFF;
    display: block;
    font-family: verdana;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    white-space: nowrap;
    z-index: 200;
    background-color: red;
    background-position: 0px 0px;
    height: 25px;
    width: 130px;
    text-align: center;
    cursor: pointer;
}
.tempSpot span{
    color: #000;
}
</style>

的jQuery

<script type="text/javascript">
var pgPosX = 0;
var pgPosY = 0;
var intTempSpot = 0;
var intSpots = 0;
$(document).ready(function() {
  $('.imgDisplayTemplate .imgImage').hover(function(e) {
    }).mousemove(function(e){
           var imgOffset = $('.imgImage img').offset();
           window.pgPosX = Math.round(e.pageX-imgOffset.left-1);
           window.pgPosY = Math.round(e.pageY-imgOffset.top-1);
           if(window.pgPosX >= 0 && window.pgPosX < 640 && window.pgPosY >= 0 && window.pgPosY < 480) {
            $('.imgDisplay .imgAnalyze span.showTemp').html("X="+window.pgPosX+" Y="+window.pgPosY);
           }
    }).click(function(e) {
        if(window.pgPosX >= 0 && window.pgPosX < 640 && window.pgPosY >= 0 && window.pgPosY < 480) {
            window.intSpots++;
            window.intTempSpot++;
            var tag = "<div class='tempSpot' id='temp_"+window.intTempSpot+"' style='left:"+(window.pgPosX+15)+"px; top: "+(window.pgPosY)+"px;'>X="+window.pgPosX+" Y="+window.pgPosY+" <span> x</span></div>";
            $('.imgDisplay .imgImage').append(tag);
            $('.imgAnalyze button.TempSpotPost').css('display', 'inline-block');
        }
    }); 

    //close a tempSpot 
    $('.imgDisplay').on('click', '.tempSpot span', function() {
        $(this).closest('div.tempSpot').remove();
    });
});
</script>

HTML

  <div class="container">
  <div class="row">
    <div class="col-md-9 col-sm-9 col-xs-9 imgDisplay">
      <div class="imgDisplayTemplate">
        <div class="panel panel-default">
          <div class="panel-heading imgHead">
            <h4 class="panel-title">Tag Test</h4>
          </div>
          <div class="panel-body imgBody">
            <div class="col-md-12 imgAnalyze">
              <h2><span class="label label-default showTemp">Y=0 X=0</span></h2>
            </div>
            <div class="row">
              <div class="col-md-12 imgImage">
                <img src="http://placehold.it/640x480" width="640" height="480">
                <div class="tempSpot" id="temp_1" style="left:220px; top: 250px;">X=220 Y=250<span> x</span></div>
                <div class="tempSpot" id="temp_2" style="left:129px; top: 116px;">X=129 Y=116<span> x</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>    
    </div>
  </div>

Answer 1

更改此

$(document).ready(function() {
  $('.imgDisplayTemplate .imgImage').hover(function(e) {

为...

$(document).ready(function() {
  $('.imgDisplayTemplate img').hover(function(e) {

仅在单击图像本身而不是周围的div时才会生成新框。当它被周围的div调用时，你会得到新的盒子，因为tempSpots位于周围的div中。

http://jsfiddle.net/qy9Ht/1/

Answer 2

您希望使用e.stopPropagation()，以防止事件冒泡DOM树并激活所有事件处理程序。

//close a tempSpot 
$('.imgDisplay').on('click', '.tempSpot span', function( event ) {
  event.stopPropagation();
  $(this).closest('div.tempSpot').remove();
});

如何在重叠div时暂停悬停在图像上？

2 个答案: