Gibt es eine ergänzende Möglichkeit, etwas wie Mausereignisse zu erhalten?

Question

Mit einfachen Verwendung von jQuery:

Wenn ich ein stationäres Feld (sagen wir, ein farbiges Rechteck), und ich bewege die Maus in oder aus ihm heraus, gibt jQuery mir Ereignisse, wenn ich den Mauszeiger über die Grenze bewegen von der Box in die eine oder andere Richtung.

Wenn ich ein farbiges Rechteck habe, das programmgesteuert bewegt wird, sagen wir nach rechts, und ich lege die Maus rechts neben die Box und warte, die Box bewegt sich unter dem Mauszeiger und bewegt sich darüber hinaus, aber ohne Erzeugen von Mausereignissen (oder zumindest Mausereignissen, die mir bekannt sind).

Welche Möglichkeiten gibt es, etwas semantisch vergleichbar mit dem "stationären Objekt, bewegenden Mauscursor" zu erhalten, wenn sich das Objekt bewegt und der Mauszeiger stationär ist?

Answer 1

Versuchen Sie, globale Variablen zum Speichern von pageX, pageY; Setze globale Variablen unter Verwendung des mousemove Ereignisses an window angehängt; Verwenden Sie step Eigenschaft von .animate() Optionen zum Berechnen der aktuellen Position des animierten Elements, Referenzierung offsetLeft, offsetTop, getBoundingClientRect().bottom; Überprüfen Sie die aktuelle Mausposition in Bezug auf die Versätze am unteren Rand des Elements.

Könnte auch Kompliment Prozess durch gleiche Prüfung innerhalb mousemove Ereignishandler Durchführung

var x = 0, 
 
    y = 0; 
 
$(window).on("mousemove", function(e) { 
 
    x = e.pageX; 
 
    y = e.pageY 
 
}) 
 
$("div") 
 
    .animate({ 
 
    left: window.innerWidth - 150 
 
    }, { 
 
    duration: 5000, 
 
    step: function() { 
 
     var l = this.offsetLeft, 
 
     t = this.offsetTop, 
 
     b = this.getBoundingClientRect().bottom; 
 
     // if element passes over mouse, log positions to `console` 
 
     if ((x === l || x === l + 1 || x === l - 1) && y > t && y < b) 
 
     console.log("pageX:", x 
 
        , "pageY:", y 
 
        , "offsetLeft:", l 
 
        , "offsetTop:", t 
 
        , "BoundingClientRect().bottom:", b) 
 
    } 
 
    })

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: olive; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div></div>

Answer 2

Als das Objekt, das sich bewegt, ist es der Initiator möglicher Kollisionsereignisse sowie der Mausbewegung. In jedem Frame, unter Verwendung von requestAnimationFrame(), sollte das Objekt prüfen, ob es mit der aktuellen Position der Maus kollidiert.

Keine vorgefertigten jQuery-Lösungen, die ich abrufen kann, aber es sollte nur ein paar Zeilen Code zu implementieren, und trigger eine benutzerdefinierte namens jQuery-Ereignis.

Aktualisierung. Ich skizzierte unten eine einfache Demo. Div springt von links nach rechts in einer Box, die die Mausposition verfolgt. Im Beispiel wird nur die horizontale Position auf Kollision überprüft. Bewegen Sie den Mauszeiger irgendwo auf dem Weg des springenden Quadrats und lassen Sie es bewegungslos. Das Quadrat wird rot, wenn die Kollision in Kraft ist, und zurück zu grau, wenn es herauskommt.

Vorbehalte. Es gibt in JS keine Möglichkeit, die Mausposition zu erreichen, ohne die Maus zu bewegen - dann gibt es ein Ereignis mit Koordinaten aus. Die Erkennung erfolgt erst, wenn die Maus mindestens einmal nach dem Laden der Seite bewegt wird.

var $cont = $('#container') 
 
    ,$out = $('#out') 
 
    ,$el = $('#bouncer') 
 
    ,mouse = { x: -1, y: -1} 
 
    ,bouncer = {x: -1, y: -1} 
 
; 
 

 
function updateMousePos(e) { 
 
    mouse.x = e.offsetX; 
 
    mouse.y = e.offsetY; 
 
    collisionTest(); 
 
} 
 
$cont.on('mousemove', updateMousePos); 
 

 
// swing it right-left endlessly 
 
function toRight() { $el.animate({left:180}, 2000, 'swing', toLeft);} 
 
function toLeft() { $el.animate({left:0}, 2000, 'swing', toRight);} 
 
toRight(); // launch animation 
 

 
function collisionTest() { 
 
    if(mouse.x > bouncer.x && mouse.x < bouncer.x + 20) { 
 
    $el.addClass('collision'); 
 
    } else { 
 
    $el.removeClass('collision'); 
 
    } 
 
} 
 

 
// update before every frame render 
 
function step(ts) { 
 
    bouncer.x = parseInt($el.css('left').slice(0, -2)); 
 
    bouncer.y = parseInt($el.css('top').slice(0, -2)); 
 
    collisionTest(); 
 
    window.requestAnimationFrame(step); 
 
} 
 
window.requestAnimationFrame(step);

#container {position:relative; width:200px; height:50px; border:1px solid #333} 
 
#bouncer {position:absolute;top:15px;width:20px;height:20px;background-color:#CCC;} 
 
#out { margin-top: 60px; } 
 
.collision {background-color:red !important}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"><div id="bouncer"></div></div>

Answer 3

Wenn Sie verwenden Sie können die Maus-Koordinaten dieses Schnipsel nehmen:

function getMousePos(canvas, evt) { 
    var rect = canvas.getBoundingClientRect(); 
    return { 
     x: evt.clientX - rect.left, 
     y: evt.clientY - rect.top 
    }; 
} 

Im Anschluss daran können Sie ein Intervall für sie festgelegt und Ihre Rechtecks ​​Koordinaten und die Flugbahn berechnen basierend auf Mauskoordinaten und Ihren Koordinaten. Daran könnte ich denken.