Question

当鼠标X位置在类的垂直边框范围内时，我需要处理事件。我的意思是，如果元素的X位置是：

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

我想知道鼠标是否水平（200px，500px）。它的垂直位置并不重要。这是一些进一步的解释：

任何帮助将不胜感激。

Answer 1

以下代码非常清楚：

＆＃13;

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) + '');
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用event.clientX或event.pageX：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我认为除了在mousemove事件上进行坐标比较之外没有其他可能性。类似的东西：

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

每次鼠标在给定范围内移动时都会触发Console.log。如果您只想检测输入，可以引入一个变量，如：

{{1}}

我希望你觉得这很有帮助......

注意：我使用id选择，所以为了使它工作，你应该给一个id =＆＃34; myDiv＆＃34;你的div ...

注意2：当然你也可以使用类选择器 - 在代码中只使用＆＃39; .myDiv＆＃39;而不是＃myDiv＆＃39;。

我做了一个简单的JSFiddle。

Answer 4

我认为这就是你想要的

我想知道鼠标是否水平（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>

Jquery -event：鼠标X位置在元素的垂直边框范围内

4 个答案: