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

当鼠标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; } 

  
 I go black when mouse is within my horizontal limits. 

Answer 2

下面的代码非常简单：

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

 
false
  

Answer 3

您可以使用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; } 

  

My Div
 

Answer 4

我认为除了在mousemove事件上进行坐标比较之外没有其他可能性。 就像是：

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

每次鼠标在给定范围内移动时都会触发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 。