0

hover メソッドと mousemove メソッドを使用してマウスの動きを追跡するイメージを使用して、Bootstrap と jQuery で作成したページがあります。次に、正確な X 座標と Y 座標をマークするタグを画像の上に追加します。

これらのタグには、クリックされたタグを削除する close 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 に答える