วิธีรับตำแหน่งเมาส์ใน jQuery โดยไม่มีเหตุการณ์เมาส์?


101

ฉันต้องการรับตำแหน่งเมาส์ปัจจุบัน แต่ไม่ต้องการใช้:

$(document).bind('mousemove',function(e){ 
        $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY); 
}); 

เพราะฉันแค่ต้องได้รับตำแหน่งและประมวลผลข้อมูล


3
.pageX และ. pageY สามารถอ่านได้จากเหตุการณ์ใด ๆ ไม่ใช่แค่. mousemove () ตัวอย่างเช่นคุณอาจต้องการทราบว่าผู้ใช้คลิกที่ใดใน Div เฉพาะ: นี่คือตัวอย่างที่เรารับฟังเหตุการณ์การคลิกภายใน div เฉพาะที่เรียกว่า #special ..... docs.jquery.com/…
Haim Evgi

นอกจากนี้ยังอาจช่วยให้คุณได้รับตำแหน่งตัวชี้เมาส์สำหรับไซต์ที่ตอบสนอง kvcodes.com/2014/03/…
Kvvaradha

คำตอบ:


151

ฉันไม่เชื่อว่ามีวิธีสืบค้นตำแหน่งเมาส์ แต่คุณสามารถใช้mousemoveตัวจัดการที่เก็บข้อมูลไว้เฉยๆเพื่อให้คุณสามารถสืบค้นข้อมูลที่จัดเก็บไว้ได้

jQuery(function($) {
    var currentMousePos = { x: -1, y: -1 };
    $(document).mousemove(function(event) {
        currentMousePos.x = event.pageX;
        currentMousePos.y = event.pageY;
    });

    // ELSEWHERE, your code that needs to know the mouse position without an event
    if (currentMousePos.x < 10) {
        // ....
    }
});

แต่โค้ดเกือบทั้งหมดนอกเหนือจากsetTimeoutโค้ดและอื่น ๆจะทำงานเพื่อตอบสนองต่อเหตุการณ์และเหตุการณ์ส่วนใหญ่จะให้ตำแหน่งเมาส์ ดังนั้นโค้ดของคุณที่ต้องรู้ว่าเมาส์อยู่ที่ไหนก็สามารถเข้าถึงข้อมูลนั้นได้แล้ว ...


7
$(window).load(function(e){ console.log(e.pageX,e.pageY); });ส่งกลับไม่ได้กำหนดสำหรับตำแหน่งเมาส์
spb

9
@TJCrowder เห็นได้ชัดว่าฉันคิดว่าเขากำลังบอกว่ามีเหตุการณ์ที่ไม่ได้ให้ตำแหน่งเมาส์เพื่อตอบสนองต่อคำตอบที่อ้างว่าเหตุการณ์ "เกือบทั้งหมด (ทั้งหมด?)" ให้ตำแหน่งเมาส์
fabspro

2
ในการป้องกัน @TJCrowder เขาพูดเกือบทั้งหมด ด้วยการตอบสนองด้วยสิ่งที่ไม่ได้เป็นประโยชน์หรือมีจุดมุ่งหมายทั้งหมด ฉันคิดว่าประเด็นของคำตอบนี้แสดงให้ผู้ใช้เห็นว่าในตัวอย่างของเขาเขาไม่ต้องใช้การเลื่อนเมาส์ ... เขาสามารถใช้อะไรก็ได้ ผู้ใช้ไม่ได้บอกโดยเฉพาะว่ารับมันโดยไม่มีเหตุการณ์ซึ่ง TJCrowder ชี้ให้เห็นว่าโค้ดเกือบทั้งหมดเกิดขึ้นหลังจากเหตุการณ์ SOME แน่นอนว่าเขากล่าวถึงสิ่งนี้หลังจากแสดงให้เห็นถึงวิธีที่เป็นไปได้ในการทำหน้าที่ของคุณเองที่ทำสิ่งที่เขาต้องการ คำตอบช่วยฉันต่อไป
Tyler

1
@Tyler: ขอบคุณ :-) "เกือบทั้งหมด" คือการเปลี่ยนแปลงที่ตามมาภาษาเริ่มต้นของฉันแรงเกินไป
TJ Crowder

26

คุณไม่สามารถอ่านตำแหน่งเมาส์ใน jQuery โดยไม่ใช้เหตุการณ์ ประการแรกโปรดทราบว่าคุณสมบัติevent.pageXและevent.pageYมีอยู่ในเหตุการณ์ใด ๆ ดังนั้นคุณสามารถทำได้:

$('#myEl').click(function(e) {
    console.log(e.pageX);
});

ตัวเลือกอื่นของคุณคือใช้การปิดเพื่อให้รหัสทั้งหมดของคุณเข้าถึงตัวแปรที่อัปเดตโดยตัวจัดการ mousemove:

var mouseX, mouseY;
$(document).mousemove(function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
}).mouseover(); // call the handler immediately

// do something with mouseX and mouseY

ปัญหาอย่างหนึ่งคือคุณไม่มี pageX และ pageY หรือ clientX และ clientY เมื่อลากใน firefox ... มีวิธีใดในการรับ pageY เมื่อลาก?
JamesTBennett

11

ฉันใช้วิธีนี้:

$(document).mousemove(function(e) {
    window.x = e.pageX;
    window.y = e.pageY;
});

function show_popup(str) {
    $("#popup_content").html(str);
    $("#popup").fadeIn("fast");
    $("#popup").css("top", y);
    $("#popup").css("left", x);
}

ด้วยวิธีนี้ฉันจะมีระยะห่างจากด้านบนบันทึกเป็น y เสมอและระยะทางจากซ้ายบันทึกเป็น x


6

ยิ่งไปกว่านั้นmousemoveเหตุการณ์จะไม่ถูกทริกเกอร์หากคุณลากและวางบนหน้าต่างเบราว์เซอร์ ในการติดตามพิกัดของเมาส์ในระหว่างการลากและวางคุณควรแนบตัวจัดการสำหรับdocument.ondragoverเหตุการณ์และใช้คุณสมบัติ originalEvent

ตัวอย่าง:

var globalDragOver = function (e)
{
    var original = e.originalEvent;
    if (original)
    {
        window.x = original.pageX;
        window.y = original.pageY;
    }
}

2

การใช้งานwindow.event- มันมีที่ผ่านมาeventและในขณะที่ใดeventมีpageX, pageYฯลฯ การทำงานสำหรับ Chrome, Safari, IE แต่ไม่ FF


0
var CurrentMouseXPostion;
var CurrentMouseYPostion;

$(document).mousemove(function(event) {
    CurrentMouseXPostion = event.pageX;
    CurrentMouseYPostion = event.pageY;
});

สร้าง EventListener บนวัตถุหลักในกรณีของฉันคือวัตถุเอกสารเพื่อให้เมาส์เชื่อมต่อทุกเฟรมและจัดเก็บไว้ในตัวแปรส่วนกลางและคุณสามารถอ่านเมาส์ Y & Z ได้ทุกเมื่อที่คุณต้องการทุกที่ที่คุณต้องการ


-1

ฉันเจอสิ่งนี้ทั้งหมดมันคงจะดีที่จะแบ่งปัน ...

พวกคุณคิดยังไง?

$(document).ready(function() {
  window.mousemove = function(e) {
    p = $(e).position();  //remember $(e) - could be any html tag also.. 
    left = e.left;        //retrieving the left position of the div... 
    top = e.top;          //get the top position of the div... 
  }
});

และบูมที่นั่นเรามี ..

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.