Mouseposition in JS Crossbrowser?

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Wieso verwendest du nicht das Event-Objekt, welches dir bekannt ist? Übergib es an die Funktion findDirection und ermittle damit die Mausposition, so in etwa: https://jsfiddle.net/d3e0Lzg2/

(...) dass die Funktion solange läuft wie gedraggt wird und nicht wie man über ein DragEl hovert. (...)

Das verstehe ich noch nicht so ganz.

Danke sehr, das schaut vielversprechend aus.

Problem 2 habe ich gerade selber gelöst, da es anscheinend ein ondrag-Event gibt. Ich werde einfach dieses, statt wie in deinem Beispiel, das onmouseup-Event verwenden und dann sollte das ganze ziemlich genau so klappen wie ich mir das vor stelle :)
https://www.w3schools.com/jsref/event_ondrag.asp

Ich werde das ganze einmal probieren und mich dann noch einmal melden!

P.S. Gehe ich richtig in der Annahme, dass das ganze auch mit Touchscreens funktionieren sollte, nachdem du cursor verwendest?

Liebe Grüße, JutenMorgen!

0
@JutenMorgen

Der Bezeichner cursor war nur spontan gewählt. Für mobile Devices solltest du andere Events verwenden (touchstart, touchend, touchmove, touchleave, touchcancel) oder besser mit jQuery arbeiten.

1

Hi Regex9,
also die Implementierung deines Vorschlags war sehr schnell erledigt und funktioniert auch....

und zwar schaut mein Code jetzt wie folgt aus:

document.onmousemove = function(e)

{
cursor = getCursorPosition(e);
// alert(cursor.x + ":" + cursor.y);
lastXpos = currentXpos;
currentXpos = cursor.x;
lastYpos = currentYpos;
currentYpos = cursor.y;
xWay[i] = lastXpos - currentXpos;
yWay[i] = lastYpos - currentYpos;

xDirection = 0;
yDirection = 0;

for(var j = 0; j < s; j++)
{
xDirection += xWay[j];
yDirection += yWay[j];
}
i++;
if(i > s-1) { i = 0; }
document.getElementById('console').innerHTML = "";
document.getElementById('console').innerHTML = cursor.x + ", " + cursor.y;
};

function getCursorPosition(e)
{
if (e.screenX || e.screenY)
{
return { "x": e.screenX, "y": e.screenY };
}

var x = e.clientX
+ (document.documentElement.scrollLeft || document.body.scrollLeft)
- document.documentElement.clientLeft;
var y = e.clientY
+ (document.documentElement.scrollTop || document.body.scrollTop)
- document.documentElement.clientTop;

return { "x": x, "y": y };
}

In Firefox funktioniert es nur, wenn man ein Mouseevent verwendet, da x und y sonst keine Werte erhalten. Damit hatte ich jetzt ewig zu kämpfen und bin nicht viel weiter als am Anfang...

Ich würde am liebsten das ondrag-Event dafür verwenden, da so die Funktion nicht die ganze Zeit mit läuft... Wüsstest du hierfür einen besseren Lösungsansatz? Wie gesagt es braucht leider zwingend ein mouseevent um die x und y Psoition in FF zu erhalten :(

Danke schon einmal für deine bisherige Hilfe und

Liebe Grüße, JutenMorgen!

0

Alles klar, ich habs jetzt ganz gut implementiert, ich hätte es zwar gerne auf dem drag-Event aber dieses scheint in FF verbuggt. Gut zu wissen... :D

Auf jeden Fall vielen Dank dir nochmal :)

Liebe Grüße, JutenMorgen!

0
@JutenMorgen

Hast du eigentlich schon einmal angeschaut, wie jQuery das implementiert / welche Funktionen die Bibliothek dazu anbietet? Eigentlich sind solche Probleme dort bereits gelöst worden.

0
@regex9

Hi regex.

Ich hab mal alte Fragen und Antworten durchgeschaut und hab gemerkt, dass ich hier nicht geantwortet hab. Ich versuche eigentlich immer APIs etc. zu vermeiden, um so viel wie möglich selber zu lernen. So habe ich z.B. hier gelernt, dass ein DnD in dieser Weise zwar echt spassig ist zu programmieren aber im Endeffekt sehr viel einfacher und besser mit DOM-Elementen umzusetzen ist.

Beides funktioniert und ich hatte riesen Spass mit meinem ersten Versuch, der währe mir mit jQuery verloren gegangen.

Danke dir für deine Hilfe :)

0

Versuche es mal damit.

document.onmousemove = (e) => {
  console.log(e.clientX);
  console.log(e.clientY);
}

Vielen Dank für deine Hilfe ich habe es jetzt gelöst, nachdem ich die FF-docs und etliche Foren durchstöbert habe. Ich wollte das ganze mit einem dragevent verknüpfen und habe ondrag dafür verwendet. Nach längerer Suche hab ich jetzt aber heraus gefunden, dass FF in diesem Event einfach nicht die MousePos updatet -.-

Bei dragover allerdings schon. Ist zwar nicht meine Liebelingslösung aber sie funktioniert :)

Onmousemove ginge auch würde aber durchgehend unnötig performance fressen, weswegen das auch weg fällt :)

Liebe Grüße, JutenMorgen!

0

Wie funktioniert eine Web-App z.B. discord?

Hallo,

wenn man bei einer Web-App ,wie zum Beispiel „discord“, sich den Quellcode anzeigen lässt, kommt im Fall von discord erst nur grundlegendes HTML heraus und dann wird auf zwei .js Dateien verwiesen in dem der ganze Inhalt drinnen steht.

Nun zu meinen Fragen:

Stehen in diesen Dateien alles drinnen was ich dort im Browser sehe. Halt in JavaScript statt in HTML ?

Und wenn ja, ich dachte das man mit JavaScript gar keine Benutzer Oberfläche programmieren kann.

Vielen Dank im Voraus.

...zur Frage

React JS - mit Click Event Handler eine Function aufrufen?

Hallo ich habe folgendes Problem, in der 10. Zeile möchte ich bei der Map Iteration ein onClick Event machen, wo ich dort die handleClick Funktion aufrufe, allerdings funktioniert das leider nicht und ich weiß nicht wieso. Wenn ich das gleiche im return Statement mache, funktioniert es. Hat jemand eine Ahnung, wie ich dort die Funktion aufrufen kann (also innerhalb der Map Funktion)?

let words = [];
class List extends React.Component{
    handleClick(){
        debugger;
    }
    render(){
        words.push(this.props.userlist);
        let outputWords = words.map(function(word,i){
            //Key wird benötigt bei solchen Elementen
            return <div key={'word_' + i}>{word}<span className="removeWord" onClick={this.handleClick}>X</span></div>
        });
        return(
            <div>
                {outputWords}
            </div>
        )
    }
}

class MyClass extends React.Component{
    constructor(props) {
        super(props);
        this.state = {value: ''};
        //Bind this to functions, because with es6 it isnt implemented automatically
        this.handleEmailChange = this.handleEmailChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleEmailChange(e) {
        this.setState({userlist: e.target.value});
    }
    handleSubmit(e) {
        e.preventDefault();
        ReactDOM.render(
            <List userlist={this.state.userlist} />,
            document.getElementById('rootOutput')
        );
        // alert(this.state.userlist)
    }
    render(){
        return(
            <form onSubmit={this.handleSubmit}>
                <input type="text" name="userlist" className="input" placeholder="Email" onChange={this.handleEmailChange} />
                <button type="submit">Merken</button>
            </form>
        )
    }
}
ReactDOM.render(
    <MyClass />,
    document.getElementById('root')
);
...zur Frage

Service Worker und Push-Benachrichtigungen?

Hallo Leute heute mal eine allgemeine Frage:

Wie kann ich einen Serviceworker so Programmieren das er Pushbenachrichtiungegen ausgibt.

Folgender Code:

function regis_sw(){
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/sw.js').then(function(registration) {
            console.log('Service worker registration succeeded:', registration);
        }).catch(function(error) {
            console.log('Service worker registration failed:', error);
        });
    } else {
        console.log('Service workers are not supported.');
    }
    navigator.serviceWorker.ready.then(
        function(serviceWorkerRegistration) {
            var options = {
                userVisibleOnly: true,
            };
            serviceWorkerRegistration.pushManager.subscribe(options).then(
                function(pushSubscription) {
                    console.log(pushSubscription.endpoint);
                }, function(error) {
                    console.log(error);
                }
            );
        }
    );
}

Das ist um den ServiceWorker zu "registrieren" und die entsprechenden Erlaubnis zu erlangen Push-Benachrichtigung zu erhalten.

Der Code wurde von developer.mozilla.org zusammenkopiert.

So jetzt ist der Serviceworker auf das JS-File "sw.js" auf meinen Server gerichtet.

Nun die Frage was muss in dem sw.js File drinnenstehen?

Hierzu muss mann sagen das ich keine Ahnung von ServiceWorkern habe und ich deswegen diese Frage stelle

...zur Frage

Suche in dem Teil des Java-Script-Code die logischen Fehler?

Hallo Zusammen,

ein guter Freund von mir, kam und bat mich um Rat, leider konnte ich ihm nicht helfen, weil ich von Java-Script überhaupt keine Ahnung habe. Darum wende ich mich an Euch.

In dem Folgenden Teil des Java-Script-Code stecken logische Fehler, für jemanden der das Versteht, ist das sicher einfach.

function sonderpunkte() {
  if (punkte < 100) {
    var zwischenstand = punkte + 50;
  }
}
function rechne(x){
  x += zwischenstand;
  document.write("In der Funktion: " + x);
}

Wenn jemand eine Antwort weis, dann zögert nicht zu antworten.

Von meinem Kumpel und von mir herzlichen Dank im Voraus.

...zur Frage

Timer mit JavaScript?

Ich möchte mit JavaScript einen Timer programmieren. Der User soll die Zeit einstellen können bspw 60min und dann soll der Timer runterzählen. Wenns bei 00:00:00 ist, soll ein neuer Bildschirm aufgerufen werden.

Ich hab leider nicht wirklich eine Ahnung wie ich das hinbekommen soll. Im Internet sind zwar Beispiele für Timer, jedoch laufen die von 0 bis unendlich.... Da ich technisch nicht so versiert bin um das ganze umzustellen, hoffe ich, dass ihr mir helfen könnt. Bis jetzt habe ich es nur hinbekommen, dass der Timer überhaupt läuft (allerdings von 0 an) und erst beginnt, wenn man auf den Start-Button drückt.

Hier meine js Datei:

$(document).ready(function() {

var timer = 0;

$( "#button_start" ).click(function() {

  setInterval(function(){ increaseTimer() }, 1000);

});

function increaseTimer(){

timer = timer +1;

$("#timer").html(timer);

};

});

Schonmal vielen Dank!

Eure Amy

...zur Frage

mcfunktions funktionieren nicht. brauche hilfe?

Meine Mc Functions funktionieren irgendwie nicht und ich weiß nicht wieso!

Ich habe eine function erstellt, die ich Hi.mcfunction genannt habe und habe diese function in einen ordner getan, den ich minecraft genannt habe. Ich habe dies in den Funktions ordner der Welt getan.

die function bestand aus:

say hi

setblock ~ ~-1 ~ minecraft:dirt

dann habe ich /reload und /function minecraft:Hi gemacht. als Fehlermeldung kam da unbeckannte Funktion minecraft:hi

Ich weiß nicht, wo der fehler ist! Ich habe mir tutorials angeschaut und ich habe nichts anderes gemacht, als die es gemacht haben. Weiß vieleicht jemand, warum das nicht funktioniert?

...zur Frage

Was möchtest Du wissen?