Javascript - Track fare konumu

SORU

17 EKİM 2011, PAZARTESİ

Javascript - Track fare konumu

Fare imleci konumunu izlemek için umuyorum, periyodik olarak her t mseconds. Bir sayfa yükler - bu izci başlamalı ve (diyelim ki) her 100 ms zaman yani, esasında, posX ve posY yeni değeri al ve çık şeklinde yazdırmak istiyorum.

Aşağıdaki kodu denedim ama değerleri dahada alamadım - posX ve posY sadece başlangıç değerleri şeklinde kutular. Bunu çalışır hale nasıl alabilirim herhangi bir fikir ?

<html>
<head>
<title> Track Mouse </title>
<script type="text/javascript">
function mouse_position()
{
    var e = window.event;

    var posX = e.clientX;
    var posY = e.clientY;

    document.Form1.posx.value = posX;
    document.Form1.posy.value = posY;

    var t = setTimeout("mouse_position()",100);

}
</script>

</head>

<body onload="mouse_position()">
<form name="Form1">
POSX: <input type="text" name="posx"><br>
POSY: <input type="text" name="posy"><br>
</form>
</body>
</html>

CEVAP

17 EKİM 2011, PAZARTESİ

Fare konumu event nesne penceresine ekleyebileceğiniz mousemove olay, bir işleyici (event kabarcıklar) tarafından tahsil edildiği bildirildi

(function() {
    document.onmousemove = handleMouseMove;
    function handleMouseMove(event) {
        var dot, eventDoc, doc, body, pageX, pageY;

        event = event || window.event; // IE-ism

        // If pageX/Y aren't available and clientX/Y are,
        // calculate pageX/Y - logic taken from jQuery.
        // (This is to support old IE)
        if (event.pageX == null && event.clientX != null) {
            eventDoc = (event.target && event.target.ownerDocument) || document;
            doc = eventDoc.documentElement;
            body = eventDoc.body;

            event.pageX = event.clientX  
              (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
              (doc && doc.clientLeft || body && body.clientLeft || 0);
            event.pageY = event.clientY  
              (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
              (doc && doc.clientTop  || body && body.clientTop  || 0 );
        }

        // Use event.pageX / event.pageY here
    }
})();

(Bu vücut if sadece eski YANİ üzerinde çalışır unutmayın.)

Example of the above in action - sayfa üzerine fare ile sürüklerken noktalar çizer. (IE8, İE11, 38 Firefox. Chrome 30, test edildi)

Eğer gerçekten zamanlayıcı tabanlı bir çözüm gerekiyorsa, bazı durum değişkenleri ile birleştirmek:

(function() {
    var mousePos;

    document.onmousemove = handleMouseMove;
    setInterval(getMousePosition, 100); // setInterval repeats every X ms

    function handleMouseMove(event) {
        var dot, eventDoc, doc, body, pageX, pageY;

        event = event || window.event; // IE-ism

        // If pageX/Y aren't available and clientX/Y are,
        // calculate pageX/Y - logic taken from jQuery.
        // (This is to support old IE)
        if (event.pageX == null && event.clientX != null) {
            eventDoc = (event.target && event.target.ownerDocument) || document;
            doc = eventDoc.documentElement;
            body = eventDoc.body;

            event.pageX = event.clientX  
              (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
              (doc && doc.clientLeft || body && body.clientLeft || 0);
            event.pageY = event.clientY  
              (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
              (doc && doc.clientTop  || body && body.clientTop  || 0 );
        }

        mousePos = {
            x: event.pageX,
            y: event.pageY
        };
    }
    function getMousePosition() {
        var pos = mousePos;
        if (!pos) {
            // We haven't seen any movement yet
        }
        else {
            // Use pos.x and pos.y
        }
    }
})();

Farkındayım kadarıyla, olay, this answer to another Stack Overflow question onaylamak gibi bir şey görmeden fare konumu elde edemezsiniz.

Yan not: Her 100 MS civarında (10 kez/saniye), gerçek işleme tutmaya çalışın bir şey yapmak için gidiyoruz eğer bu işlevi yapmakçok, çok sınırlı. Bu tarayıcı için çalışmak, özellikle eski Microsoft olanlar var. Evet, modern bilgisayarlar gibi gelmiyor pek, ama orada bir şey oluyor tarayıcılarda... Yani örneğin, takip edin son pozisyon işlenmiş ve kefalet gelen işleyicisi hemen pozisyonu hiç değişmemiş.

Bunu Paylaş: