วิธีรับตำแหน่งของเมาส์โดยไม่มีเหตุการณ์ (โดยไม่เลื่อนเมาส์)

เป็นไปได้หรือไม่ที่จะได้ตำแหน่งของเมาส์ด้วย JavaScript หลังจากที่โหลดหน้าเว็บโดยไม่มีเหตุการณ์การเคลื่อนไหวของเมาส์ (โดยไม่เลื่อนเมาส์)?

คำตอบจริง: ไม่มันเป็นไปไม่ได้

ตกลงฉันเพิ่งคิดวิธี วางซ้อนหน้าของคุณด้วย div ที่ครอบคลุมทั้งเอกสาร ภายในนั้นให้สร้าง (พูด) <a>องค์ประกอบ2,000 x 2,000 (เพื่อให้:hoverคลาสเทียมใช้งานได้ใน IE 6 ดู) ขนาดแต่ละพิกเซล สร้าง:hoverกฎCSS สำหรับ<a>องค์ประกอบเหล่านั้นที่เปลี่ยนแปลงคุณสมบัติ (สมมุติว่าfont-family) ในตัวจัดการโหลดของคุณวนไปรอบ<a>ๆ องค์ประกอบทั้ง 4 ล้านชิ้นตรวจสอบcurrentStyle/ getComputedStyle()จนกว่าคุณจะพบชิ้นส่วนที่มีตัวอักษรโฮเวอร์ ประมาณค่ากลับจากองค์ประกอบนี้เพื่อรับพิกัดภายในเอกสาร

NB ไม่ทำเช่นนี้

แก้ไข 2020: สิ่งนี้ไม่ทำงานอีกต่อไป ดูเหมือนว่าผู้ขายเบราว์เซอร์จะแก้ไขปัญหานี้ เนื่องจากเบราว์เซอร์ส่วนใหญ่พึ่งพาโครเมียมจึงอาจอยู่ในแกนกลาง

คำตอบเก่า: คุณยังสามารถขอวาง mouseenter ได้ (เหตุการณ์นี้เกิดขึ้นหลังจากการโหลดหน้าเว็บอีกครั้งเมื่อผู้ให้ข้อมูลอยู่ในหน้า) การขยายโค้ดที่เสียหายควรทำตามขั้นตอนดังนี้:

var x = null;
var y = null;
    
document.addEventListener('mousemove', onMouseUpdate, false);
document.addEventListener('mouseenter', onMouseUpdate, false);
    
function onMouseUpdate(e) {
  x = e.pageX;
  y = e.pageY;
  console.log(x, y);
}

function getMouseX() {
  return x;
}

function getMouseY() {
  return y;
}

นอกจากนี้คุณยังสามารถตั้งค่า x และ y เป็นโมฆะใน mouseleave-event ดังนั้นคุณสามารถตรวจสอบว่าผู้ใช้อยู่ในหน้าของคุณด้วยเคอร์เซอร์หรือไม่

สิ่งที่คุณสามารถทำได้คือสร้างตัวแปรสำหรับxและyพิกัดเคอร์เซอร์ของคุณอัปเดตเมื่อใดก็ตามที่เมาส์เคลื่อนย้ายและเรียกใช้ฟังก์ชันตามช่วงเวลาเพื่อทำสิ่งที่คุณต้องการด้วยตำแหน่งที่เก็บไว้

ข้อเสียของหลักสูตรนี้คือต้องมีการเคลื่อนย้ายเมาส์ครั้งแรกอย่างน้อยหนึ่งครั้งเพื่อให้สามารถใช้งานได้ ตราบใดที่เคอร์เซอร์อัปเดตตำแหน่งอย่างน้อยหนึ่งครั้งเราสามารถค้นหาตำแหน่งได้โดยไม่คำนึงว่ามันจะเคลื่อนไหวอีกครั้งหรือไม่

var cursorX;
var cursorY;
document.onmousemove = function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
}
setInterval(checkCursor, 1000);
function checkCursor(){
    alert("Cursor at: " + cursorX + ", " + cursorY);
}

โค้ดก่อนหน้านี้อัปเดตหนึ่งครั้งต่อวินาทีด้วยข้อความว่าเคอร์เซอร์อยู่ที่ใด ฉันหวังว่านี่จะช่วยได้.

คุณสามารถลองสิ่งที่คล้ายกับสิ่งที่ Tim Down แนะนำ - แต่แทนที่จะมีองค์ประกอบสำหรับแต่ละพิกเซลบนหน้าจอสร้างเพียง 2-4 องค์ประกอบ (กล่อง) และเปลี่ยนตำแหน่งความกว้างความสูงแบบไดนามิกเพื่อแบ่งตำแหน่งที่เป็นไปได้บนหน้าจอ ด้วย 2-4 ซ้ำการค้นหาตำแหน่งเมาส์จริงอย่างรวดเร็ว

ตัวอย่างเช่น - องค์ประกอบแรกใช้ครึ่งหน้าจอด้านขวาและซ้ายหลังจากนั้นครึ่งบนและล่าง เมื่อถึงตอนนี้เรารู้แล้วว่าเมาส์อยู่ตำแหน่งใดในสี่หน้าจอสามารถทำซ้ำได้ - ค้นพบว่าพื้นที่ใดในไตรมาสนี้ ...

คำตอบของ @Tim Down ไม่แสดงหากคุณแสดง<a>องค์ประกอบ2,000 x 2,000 :

ตกลงฉันเพิ่งคิดวิธี วางซ้อนหน้าของคุณด้วย div ที่ครอบคลุมทั้งเอกสาร ภายในนั้นให้สร้าง (พูด) องค์ประกอบ 2,000 x 2,000 (เพื่อให้: โฮเวอร์ pseudo-class จะทำงานใน IE 6, ดู), ขนาดแต่ละพิกเซล 1 สร้าง CSS: กฎโฮเวอร์สำหรับองค์ประกอบเหล่านั้นที่เปลี่ยนแปลงคุณสมบัติ (สมมติว่าเป็นแบบอักษรตระกูล) ในตัวจัดการโหลดของคุณวนไปรอบ ๆ องค์ประกอบทั้ง 4 ล้านชิ้นตรวจสอบ currentStyle / getComputedStyle () จนกระทั่งคุณพบหนึ่งตัวที่มีแบบอักษรโฮเวอร์ ประมาณค่ากลับจากองค์ประกอบนี้เพื่อรับพิกัดภายในเอกสาร

NB อย่าทำเช่นนี้

แต่คุณไม่จำเป็นต้องแสดงองค์ประกอบ 4 ล้านรายการพร้อมกันแทนที่จะใช้การค้นหาแบบไบนารี เพียงใช้ 4 <a>องค์ประกอบแทน:

• ขั้นตอนที่ 1: พิจารณาทั้งหน้าจอเป็นพื้นที่ค้นหาเริ่มต้น
• ขั้นตอนที่ 2: แยกพื้นที่ค้นหาออกเป็นสี่เหลี่ยมผืนผ้า 2 x 2 = 4 <a>องค์ประกอบ
• ขั้นตอนที่ 3: การใช้getComputedStyle()ฟังก์ชั่นกำหนดว่าเมาส์โฉบสี่เหลี่ยมผืนผ้าใด
• ขั้นตอนที่ 4: ลดพื้นที่การค้นหาเป็นสี่เหลี่ยมนั้นและทำซ้ำจากขั้นตอนที่ 2

วิธีนี้คุณจะต้องทำซ้ำขั้นตอนเหล่านี้สูงสุด 11 ครั้งเนื่องจากหน้าจอของคุณไม่กว้างเกิน 2048px

ดังนั้นคุณจะสร้าง<a>องค์ประกอบสูงสุด 11 x 4 = 44

หากคุณไม่จำเป็นต้องกำหนดตำแหน่งเมาส์ให้ตรงกับพิกเซล แต่บอกว่าแม่นยำ 10px ก็โอเค คุณจะทำซ้ำขั้นตอนมากที่สุด 8 ครั้งดังนั้นคุณจะต้องวาด<a>องค์ประกอบสูงสุด 8 x 4 = 32

การสร้างและทำลาย<a>องค์ประกอบนั้นไม่ใช่การแสดงเนื่องจาก DOM นั้นช้า แต่คุณก็สามารถนำมาใช้ครั้งแรก 4 <a>องค์ประกอบและเพียงแค่ปรับของพวกเขาtop, left, widthและheightในขณะที่คุณห่วงผ่านขั้นตอน

ทีนี้การสร้าง 4 <a>ก็เกินไปเช่นกัน คุณสามารถใช้<a>องค์ประกอบเดียวกันซ้ำได้เมื่อทำการทดสอบgetComputedStyle()ในแต่ละสี่เหลี่ยมผืนผ้า ดังนั้นแทนที่จะแยกการค้นหาพื้นที่ออกเป็น<a>องค์ประกอบ2 x 2 เพียงนำ<a>องค์ประกอบเดียวมาใช้ใหม่โดยการย้ายด้วยคุณสมบัติtopและleftสไตล์

ดังนั้นสิ่งที่คุณต้องมีก็คือการ<a>เปลี่ยนองค์ประกอบwidthและheightสูงสุด 11 ครั้งและเปลี่ยนtopและleftสูงสุด 44 ครั้งและคุณจะได้ตำแหน่งเมาส์ที่แน่นอน

ทางออกที่ง่ายที่สุด แต่ไม่แม่นยำ 100%

$(':hover').last().offset()

ผลลัพธ์: {top: 148, left: 62.5}
ผลลัพธ์ขึ้นอยู่กับขนาดองค์ประกอบที่ใกล้ที่สุดและส่งคืนundefinedเมื่อผู้ใช้เปลี่ยนแท็บ

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

คุณสามารถใช้รหัสของ JHarding บนหน้าพาเรนต์ของคุณเพื่อให้ตำแหน่งล่าสุดพร้อมใช้งานในตัวแปรส่วนกลาง:

var cursorX;
var cursorY;
document.onmousemove = function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
}

สิ่งนี้จะไม่ช่วยผู้ใช้ที่นำทางไปยังหน้านี้ด้วยวิธีอื่นที่ไม่ใช่เพจระดับบนของคุณ

ฉันใช้การค้นหาแนวนอน / แนวตั้ง (ก่อนอื่นให้ div ที่เต็มไปด้วยลิงค์แนวตั้งจัดเรียงในแนวนอนจากนั้นทำการ div ที่เต็มไปด้วยลิงค์แนวนอนที่จัดเรียงในแนวตั้งและเพียงแค่ดูว่าอันใดมีสถานะโฮเวอร์) มันทำงานได้ค่อนข้างเร็ว น่าเศร้าที่ใช้งานไม่ได้กับ Chrome 32 บน KDE

jsfiddle.net/5XzeE/4/

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

document.body.addEventListener('click',function(e)
{
    console.log("cursor-location: " + e.clientX + ',' + e.clientY);
});

การตอบคำถามของ @ SuperNova ต่อไปนี้เป็นวิธีการใช้คลาส ES6 ที่ช่วยให้บริบทนั้นthisถูกต้องในการติดต่อกลับ:

class Mouse {
  constructor() {
    this.x = 0;
    this.y = 0;
    this.callbacks = {
      mouseenter: [],
      mousemove: [],
    };
  }

  get xPos() {
    return this.x;
  }

  get yPos() {
    return this.y;
  }

  get position() {
    return `${this.x},${this.y}`;
  }

  addListener(type, callback) {
    document.addEventListener(type, this); // Pass `this` as the second arg to keep the context correct
    this.callbacks[type].push(callback);
  }

  // `handleEvent` is part of the browser's `EventListener` API.
  // https://developer.mozilla.org/en-US/docs/Web/API/EventListener/handleEvent
  handleEvent(event) {
    const isMousemove = event.type === 'mousemove';
    const isMouseenter = event.type === 'mouseenter';

    if (isMousemove || isMouseenter) {
      this.x = event.pageX;
      this.y = event.pageY;
    }

    this.callbacks[event.type].forEach((callback) => {
      callback();
    });
  }
}

const mouse = new Mouse();

mouse.addListener('mouseenter', () => console.log('mouseenter', mouse.position));
mouse.addListener('mousemove', () => console.log('mousemove A', mouse.position));
mouse.addListener('mousemove', () => console.log('mousemove B', mouse.position));

นี่คือทางออกของฉัน มันส่งออกwindow.currentMouseXและwindow.currentMouseYคุณสมบัติที่คุณสามารถใช้ที่ใดก็ได้ มันใช้ตำแหน่งขององค์ประกอบที่วนเวียนอยู่ (ถ้ามี) เริ่มต้นและหลังจากนั้นฟังการเคลื่อนไหวของเมาส์เพื่อตั้งค่าที่ถูกต้อง

(function () {
    window.currentMouseX = 0;
    window.currentMouseY = 0;

    // Guess the initial mouse position approximately if possible:
    var hoveredElement = document.querySelectorAll(':hover');
    hoveredElement = hoveredElement[hoveredElement.length - 1]; // Get the most specific hovered element

    if (hoveredElement != null) {
        var rect = hoveredElement.getBoundingClientRect();
        // Set the values from hovered element's position
        window.currentMouseX = window.scrollX + rect.x;
        window.currentMouseY = window.scrollY + rect.y;
    }

    // Listen for mouse movements to set the correct values
    document.addEventListener('mousemove', function (e) {
        window.currentMouseX = e.pageX;
        window.currentMouseY = e.pageY;
    });
}())

Composr CMSที่มา: https://github.com/ocproducts/composr/commit/a851c19f925be20bc16bfe016be42924989f262e#diff-b162dc9c35a97618a96748639ff41251R1202

var x = 0;
var y = 0;

document.addEventListener('mousemove', onMouseMove, false)

function onMouseMove(e){
    x = e.clientX;
    y = e.clientY;
}

function getMouseX() {
    return x;
}

function getMouseY() {
    return y;
}

ฉันคิดว่าฉันอาจมีทางออกที่สมเหตุสมผลโดยไม่ต้องนับ divs และ pixels .. lol

เพียงใช้เฟรมภาพเคลื่อนไหวหรือช่วงเวลาของฟังก์ชั่น คุณจะต้องใช้เหตุการณ์เมาส์เพียงครั้งเดียวเพื่อเริ่มต้น แต่ในทางเทคนิคแล้วคุณวางตำแหน่งนี้ตามที่คุณต้องการ

โดยพื้นฐานแล้วเรากำลังติดตามตัวจำลองหุ่นตลอดเวลาโดยไม่มีการเคลื่อนไหวของเมาส์

// create a div(#mydiv) 1px by 1px set opacity to 0 & position:absolute;

ด้านล่างเป็นตรรกะ ..

var x,y;


$('body').mousemove(function( e ) {

    var x = e.clientX - (window.innerWidth / 2);
    var y = e.clientY - (window.innerHeight / 2);
 }


function looping (){

   /* track my div position 60 x 60 seconds!
      with out the mouse after initiation you can still track the dummy div.x & y
      mouse doesn't need to move.*/

   $('#mydiv').x = x;    // css transform x and y to follow 
   $('#mydiv)'.y = y;

   console.log(#mydiv.x etc)

   requestAnimationFrame( looping , frame speed here);
}