Sử dụng jQuery cách lấy tọa độ nhấp chuột trên phần tử đích

109

Tôi có trình xử lý sự kiện sau cho phần tử html của mình

jQuery("#seek-bar").click(function(e){
    var x = e.pageX - e.target.offsetLeft;
    alert(x);    
});

Tôi cần tìm vị trí của chuột trên thanh # tìm kiếm tại thời điểm nhấp. Tôi đã nghĩ rằng mã trên sẽ hoạt động, nhưng nó cho kết quả không chính xác

— Roman
nguồn

4

Vị trí liên quan đến phần tử, khung nhìn hoặc toàn bộ tài liệu?

— James

Tôi đã làm cho nó hoạt động bằng cách sử dụng e.layerX - e.target.offsetLeft và đối với Oprea chỉ sử dụng e.offsetX

— Roman

nếu bạn muốn lấy nó trên một trang web đáp ứng. hãy thử bài viết này, bạn cũng có thể tải nó trên các trang web đáp ứng. kvcodes.com/2014/03/…

— Kvvaradha 16/02/16

235

Bạn đang cố lấy vị trí của con trỏ chuột relativeđến phần tử (hoặc) đơn giản là vị trí của con trỏ chuột

Hãy thử Demo này: http://jsfiddle.net/AMsK9/

Biên tập :

1) event.pageX, event.pageYcung cấp cho bạn tài liệu tương đối về vị trí chuột!

Tham khảo : http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/

2) offset(): Nó cung cấp vị trí bù đắp của một phần tử

Tham khảo : http://api.jquery.com/offset/

3) position(): Nó cung cấp cho bạn Vị trí tương đối của một phần tử, tức là,

coi một phần tử được nhúng bên trong một phần tử khác

ví dụ :

<div id="imParent">
   <div id="imchild" />
</div>

Tham khảo : http://api.jquery.com/position/

HTML

<body>
   <div id="A" style="left:100px;"> Default    <br /> mouse<br/>position </div>
   <div id="B" style="left:300px;"> offset()   <br /> mouse<br/>position </div>
   <div id="C" style="left:500px;"> position() <br /> mouse<br/>position </div>
</body>

JavaScript

$(document).ready(function (e) {

    $('#A').click(function (e) { //Default mouse Position 
        alert(e.pageX + ' , ' + e.pageY);
    });

    $('#B').click(function (e) { //Offset mouse Position
        var posX = $(this).offset().left,
            posY = $(this).offset().top;
        alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
    });

    $('#C').click(function (e) { //Relative ( to its parent) mouse position 
        var posX = $(this).position().left,
            posY = $(this).position().top;
        alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
    });
});

9

+1 cho các ví dụ ... một lưu ý mặc dù tôi cũng sẽ thêm mã ở đây, nếu liên kết của bạn chết, câu hỏi này sẽ trở nên vô dụng trong tương lai, tôi sẽ đặt mã cho mỗi và một mô tả ngắn gọn ở đây :)

— Nick Craver

2

Có một cách đơn giản hơn để thực hiện trong trường hợp '#B': e.offsetXvà e.offsetY. Tôi đoán bạn muốn chỉnh sửa nó. Tôi đã cập nhật fiddle ở đây . Tôi tìm thấy giải pháp này nhờ vào bài đăng, vì vậy cảm ơn.

— toto_tico

Cảm ơn, vì cá nhân tôi nhầm lẫn với offset () và position (), nếu ai cần làm rõ thêm có thể đọc stackoverflow.com/questions/3202008/… để thuận tiện

— simongcc

Tôi đã cố định một phần tử ở dưới cùng - đó là chiều rộng 100%, vì vậy tôi đã sử dụng chiều rộng cửa sổ làm posX thay thế - Vì vậy, tôi có thể xác định xem người dùng có đang cắt dấu "X" được thực hiện bằng quy tắc: sau css không ở góc trên cùng bên phải.

— amurrell

Ví dụ tuyệt vời, nhưng không rõ ràng sự khác biệt giữa .position () và .offset () là gì. Bạn nên bọc phần tử #C trong một số div cha với một số vị trí mẫu để thấy rằng nhấp chuột vào #C trả về vị trí chuột của bạn bên trong phần tử là cha của #C, điều này có lẽ ít hữu ích nhất.

— amik

15

$('#something').click(function (e){
    var elm = $(this);
    var xPos = e.pageX - elm.offset().left;
    var yPos = e.pageY - elm.offset().top;

    console.log(xPos, yPos);
});

— Nisar
nguồn

3

Thử cái này:

jQuery(document).ready(function(){
   $("#special").click(function(e){
      $('#status2').html(e.pageX +', '+ e.pageY);
   }); 
})

Tại đây, bạn có thể tìm thêm thông tin với DEMO

— Krunal
nguồn

1

Tính theo phần trăm:

$('.your-class').click(function (e){
    var $this = $(this); // or use $(e.target) in some cases;
    var offset = $this.offset();
    var width = $this.width();
    var height = $this.height();
    var posX = offset.left;
    var posY = offset.top;
    var x = e.pageX-posX;
        x = parseInt(x/width*100,10);
        x = x<0?0:x;
        x = x>100?100:x;
    var y = e.pageY-posY;
        y = parseInt(y/height*100,10);
        y = y<0?0:y;
        y = y>100?100:y;
    console.log(x+'% '+y+'%');
});

— l2aelba
nguồn

1

Nếu MouseEvent.offsetX được trình duyệt của bạn hỗ trợ (tất cả các trình duyệt chính thực sự hỗ trợ nó), thì đối tượng Sự kiện jQuery sẽ chứa thuộc tính này.

Thuộc tính chỉ đọc MouseEvent.offsetX cung cấp độ lệch trong tọa độ X của con trỏ chuột giữa sự kiện đó và cạnh đệm của nút đích.

$("#seek-bar").click(function(event) {
  var x = event.offsetX
  alert(x);    
});

— Memet Olsen
nguồn

0

xem ở đây nhập mô tả liên kết ở đây

html

<body>
<p>This is a paragraph.</p>
<div id="myPosition">
</div>
</body>

css

#myPosition{
  background-color:red;
  height:200px;
  width:200px;
}

jquery

$(document).ready(function(){
    $("#myPosition").click(function(e){
       var elm = $(this);
       var xPos = e.pageX - elm.offset().left;
       var yPos = e.pageY - elm.offset().top;
       alert("X position: " + xPos + ", Y position: " + yPos);
    });
});

— AirBlack
nguồn