如何使用jQuery检测Div中间的40％

Question

Can you please let me know if it is possible to detect the 40% in the Middle of a Div Using jQuery for example in following example I need to enable the mousemove() only on 30% left side or 30% of the right side of the center.

 $('#box-wrap').mousemove(function(e){ var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; console.log("X: " + x + " Y: " + y); }); 

 html, body{ width:100%; height:100; } #box-wrap{ height:400px; width:100%; background:yellow; } 

 <div id="box-wrap"></div> 

Thanks

Answer 1

How about adding two child divs and calling .mousemove() on them instead?

<div id="box-wrap">
    <div id="left_30"></div>
    <div id="right_30"></div>
</div>

#left_30 {
    position: absolute;
    width: 30%;
    height: 100%;
}

#right_30 {
    position: absolute;
    width: 30%;
    height: 100%;
    right: 0px;
}

Check out this working fiddle: https://jsfiddle.net/qeaxu9c9/2/

Answer 2

Add just two transparent divs as an overlay on the left and right and have the mouse move events only on those. I just added a red border to make them visible:

 $('.sensor').mousemove(function(e){ var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; console.log("X: " + x + " Y: " + y); }); 

 html, body{ width:100%; height:100; } #box-wrap{ height:400px; width:100%; background:yellow; } .sensor { width:30%; height: 100%; border: 1px solid red; background-color: transparent; cursor: pointer; } .left { position:absolute; left: 0px; top: 0px; } .right{ position:absolute; right: 0px; top: 0px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="box-wrap"> <div class="left sensor"></div> <div class="right sensor"></div> Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem .... </div> 

Answer 3

Try this:

$('#box-wrap').mousemove(function(e){
  var t = $(this), w = t.height(), h = t.width(), os = t.offset();
  var x = e.pageX - os.left, y = e.pageY - os.top;
  console.log("X: " + x + " Y: " + y);
  if(x >= w * 0.3 && x <= w * 0.7 && y >= h * 0.3 && y <= h * 0.7){
    console.log('Inner 40&#037;');
  }    
});