Как получить позицию мыши - по отношению к элементу

Question

Я хотел бы получить позицию мыши, относительно элемента курсор находится в

Следующий захват кода позиции, где мыши относительно страницы..

$("div").mousemove(function(event) { 
var pageCoords = "(" + event.pageX + ", " + event.pageY + ")"; 
var clientCoords = "(" + event.clientX + ", " + event.clientY + ")"; 
$("span:first").text("(event.pageX, event.pageY) : " + pageCoords); 
$("span:last").text("(event.clientX, event.clientY) : " + clientCoords); 
}); 

http://api.jquery.com/mousemove/

Answer 1

HTML http://jsfiddle.net/1gzdkg9p/

<div id="result"></div> 

Jquery

jQuery(function($) { 
    var currentMousePos = { x: -1, y: -1 }; 
    $(document).mousemove(function(event) { 
     currentMousePos.x = event.pageX; 
     currentMousePos.y = event.pageY; 
     $("#result").html("X: "+currentMousePos.x+" Y : "+currentMousePos.y); 
    }); 



}); 

Answer 2

Посмотрите на эту Fiddle. [Отредактировано]

Вы должны получить координаты мыши, а затем вычесть смещение элемента, чтобы получить относительное значение.

HTML:

<div class="test"></div> 

JS:

$(document).on('mousemove','.test', function(e){ 
    var offset = $(this).offset(); 
    var relativeX = e.pageX - offset.left; 
    var relativeY = e.pageY - offset.top; 
    var wide = $(this).width(); 
    var tall = $(this).height(); 
    var percentX = (relativeX*100)/wide; 
    var percentY = (relativeY*100)/tall; 
    console.log(percentX+", "+percentY); 
}); 

CSS:

.test{ 
    background-color: #000000; 
    width: 50%; 
    height: 50px; 
    margin-left: 40px; 
    margin-top: 20px; 
} 

Answer 3

Попробуйте это JSFiddle

Вам необходимо включить .js файл для использования этого кода: Jquery-2.1.1.js

Для относительного положения мыши код здесь:.

var x,y; 
$("#div1").mousemove(function(event) { 
    var offset = $(this).offset(); 
    x = event.pageX- offset.left; 
    y = event.pageY- offset.top; 
    $("#div1").html("(X: "+x+", Y: "+y+")"); 
});