0

我有一个使用 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>
4

2 回答 2

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/

于 2013-10-14T20:18:47.070 回答
0

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

//close a tempSpot 
$('.imgDisplay').on('click', '.tempSpot span', function( event ) {
  event.stopPropagation();
  $(this).closest('div.tempSpot').remove();
});
于 2013-10-14T20:41:08.453 回答