JQuery'de fare olayları olmadan fare konumu nasıl elde edilir?

101

Geçerli fare konumunu almak istiyorum ama kullanmak istemiyorum:

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

çünkü sadece pozisyonu almam ve bilgileri işlemem gerekiyor

jquery mouse position

— Martin Vseticka
kaynak

3

.pageX ve .pageY yalnızca .mousemove () değil, herhangi bir olaydan okunabilir. Örneğin, bir kullanıcının belirli bir div içinde tam olarak nerede tıkladığını bilmek isteyebilirsiniz: Burada, #special adlı belirli bir div içindeki tıklama olayını dinlediğimiz bir örnek var. ..... docs.jquery.com/…

— Haim Evgi

bu aynı zamanda duyarlı siteler için fare işaretçisi konumlarını almanıza da yardımcı olabilir. kvcodes.com/2014/03/…

— Kvvaradha

151

Fare konumunu sorgulamanın bir yolu olduğuna inanmıyorum , ancak mousemovebilgileri saklayan bir işleyici kullanabilirsiniz , böylece depolanan bilgileri sorgulayabilirsiniz.

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) {
        // ....
    }
});

AncaksetTimeout kod ve benzeri dışındaki hemen hemen tüm kodlar bir olaya yanıt olarak çalışır ve çoğu olay fare konumunu sağlar. Yani farenin nerede olduğunu bilmesi gereken kodunuz muhtemelen bu bilgilere zaten erişebilir ...

— TJ Crowder
kaynak

7

$(window).load(function(e){ console.log(e.pageX,e.pageY); });fare konumu için tanımsız

— değerini

9

@TJCrowder Oldukça açık bence, orada "neredeyse tüm (tümü?)" Olayların fare konumunu sağladığını iddia ederek cevaba yanıt vermek için fare konumunu sağlamayan bir olay olduğunu söylüyor.

— fabspro

2

@TJCrowder savunmasında NEREDEYSE hepsini söyledi. O kadar yararlı veya amaca yönelik olmayan biriyle yanıt vererek. Sanırım bu cevabın amacı, kullanıcıya örneğinde fare hareketini kullanmak zorunda olmadığını ... her şeyi kullanabileceğini gösteriyor. Kullanıcı özel olarak bir olay olmadan almayı söylemedi, TJCrowder neredeyse TÜM kodun SOME olayından sonra gerçekleştiğine işaret ediyor. Elbette, ihtiyaç duyduğu şeyi yapan kendi işlevinizi yapmanın uygulanabilir bir yolunu gösterdikten SONRA bundan bahsediyor. Cevap yine de bana yardımcı oldu.

— Tyler

1

@Tyler: Teşekkürler. :-) "neredeyse hepsi" sonraki bir değişiklikti, başlangıçtaki dilim çok güçlüydü.

— TJ Crowder

26

Bir olay kullanmadan jQuery'de fare konumunu okuyamazsınız. Öncelikle event.pageXve event.pageYözelliklerinin herhangi bir olayda var olduğuna dikkat edin , böylece şunları yapabilirsiniz:

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

Diğer seçeneğiniz, tüm kodunuza bir fare imleci işleyicisi tarafından güncellenen bir değişkene erişim sağlamak için bir kapatma kullanmaktır:

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

// do something with mouseX and mouseY

— yalnız gün
kaynak

Bununla ilgili bir sorun, firefox'a sürüklerken pageX ve pageY veya clientX ve clientY'ye sahip olmamanızdır ... Sürüklerken pageY'yi almanın bir yolu var mı?

— JamesTBennett

11

Bu yöntemi kullandım:

$(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);
}

Bu şekilde, her zaman üstten y'ye kaydedilen mesafeye ve x'e kaydedilen soldan mesafeye sahip olacağım.

— Nicu Criste
kaynak

6

Ayrıca, mousemovebir tarayıcı penceresi üzerinde sürükleyip bırakma gerçekleştirirseniz , olaylar tetiklenmez. Sürükleyip bırakma sırasında fare koordinatlarını izlemek için, document.ondragoverolay için işleyici eklemeniz ve bunun originalEvent özelliğini kullanmanız gerekir.

Misal:

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

— Alfishe
kaynak

2

kullanım window.event- sonuncuyu eventve eventiçerdiği gibi pageX, pageYvb. içerir . Chrome, Safari, IE için çalışır ancak FF için çalışmaz.

— Oleksandr Tsurika
kaynak

0

var CurrentMouseXPostion;
var CurrentMouseYPostion;

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

Ana nesne üzerinde, benim durumumda belge nesnesi üzerinde bir eventListener oluşturun, her karede fare koordinatlarını alın ve bunları global değişkenlerde saklayın ve bu şekilde istediğiniz zaman, istediğiniz yerde fare Y ve Z'yi okuyabilirsiniz.

— Ala Mouhamed
kaynak

-1

Buna rastladım, paylaşmak güzel olurdu ...

Siz ne düşünüyorsunuz?

$(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... 
  }
});

ve bum, işte bizde ..

— Ande Caleb
kaynak