Jquery -event：マウスのX位置が要素の垂直境界線の範囲内にある

Question

マウスのX位置がクラスの垂直境界線の範囲内にある場合にイベントを処理する必要があります。要素のX位置がある場合、私は、意味：

X: 200px; 
X+element.width(): 500px; 

私はマウスが内に水平であるかどうかを知りたい（200pxの、500pxなど）。垂直位置は問題ではありません。ここではそれ以上の説明です：

助けていただければ幸いです。

Answer 1

私は、これはあなたが私はマウスが（200pxの範囲内に水平であるかどうかを知りたい

を望んだと思います、500px）。それは の垂直位置は関係ありません。

$(document).ready(function(){ 
 
    $(window).on('mousemove', function(e){ 
 
    if((e.pageX >= $('#container').offset().left) && (e.pageX <= $('#container').offset().left + $('#container').width())){ 
 
     $('#container').addClass('in'); 
 
     } 
 
    else 
 
     $('#container').removeClass('in'); 
 
    }); 
 

 
});

#container{ 
 
    height:50px; 
 
    position:relative; 
 
    margin-left:200px; 
 
    width:300px; 
 
    border:1px solid; 
 
    transition:.2s all; 
 
} 
 

 
#container.in{ 
 
    color:white; 
 
    background:black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> I go black when mouse is within my horizontal limits.</div>

Answer 2

あなたはevent.clientXかevent.pageXを使用することができます。

$(document).on('click mousemove', function(e) { 
 
    var msg; 
 
    if (e.pageX <= $('#mydiv').outerWidth(true)) { 
 
    msg = 'within width of mydiv'; 
 
    } else { 
 
    msg = 'outside of width of mydiv'; 
 
    } 
 
    $('pre').html(msg); 
 
});

.mydiv { 
 
    width: 500px; 
 
    height: 50px; 
 
    border: solid 1px red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<pre></pre> 
 
<div id='mydiv' class='mydiv'>My Div</div>

Answer 3

私はのMouseMoveイベント上の座標の比較を行うよりも、他の可能性がないと思います。次のようなものがあります。

Console.logは、マウスが所定の範囲内を移動するたびに発生します。あなただけの入りを検出したい場合は、あなたのような変数を導入することができます：私はあなたがこれが役に立つことを願って

var inRange = false; 
$(document).on("mousemove", function(event) { 
    if(event.pageX > $('#myDiv').offset().left && event.pageX < $('#myDiv').offset().left + $('#myDiv').width()) { 
     if (!inRange) { 
      console.log('I am in range! Cursor X pos: ' + event.pageX); 
     } 
     inRange = true; 
    } else { 
     inRange = false; 
    } 
}); 

を...

は

ノート：私はそれを動作させるために、IDの選択を使用して、あなたが与える必要がありますあなたのdivへのid = "myDiv" ...

注2：もちろん、クラスセレクタを使用することもできます - コードでは、 '#myDiv'の代わりに '.myDiv'を使用します。

私はシンプルにJSFiddleを作った。

Answer 4

以下のコードはかなり自明です：

function isWithinBoundries($el, ev) { 
 
    var x = ev.pageX, 
 
     leftBound = $el.offset().left, 
 
     rightBound = leftBound + $el.width(); 
 
    
 
    return (x > leftBound && x < rightBound) ? true : false; 
 
} 
 

 
$(document).ready(function() { 
 
    var $elem = $('.myDiv'); 
 
    
 
    $(document).on('mousemove', function(e){ 
 
    $elem.html(isWithinBoundries($elem, e) + ''); 
 
    }); 
 
});

body { 
 
    margin-left: 0; 
 
} 
 

 
.myDiv { 
 
    width: 300px; 
 
    margin-left: 200px; 
 
    padding: 5px; 
 
    background-color: #ccc; 
 
    text-align: center; 
 
    line-height: 3; 
 
}

<div class="myDiv">false</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>