ITA Forum
Würden Sie gerne auf diese Nachricht reagieren? Erstellen Sie einen Account in wenigen Klicks oder loggen Sie sich ein, um fortzufahren.

Mouseevents

Nach unten

Mouseevents Empty Mouseevents

Beitrag von Phil Mo Feb 05, 2018 10:07 am

Hier ein paar Mouseevents.

HTML:
Code:

<!DOCTYPE html>
<html>

<head>
    <title>Event Einführung</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="events.css">
</head>

<body>

    <h1>Event Einführung</h1>
    <div id="testflaeche"></div>
    <div id="output"></div>
    <div id="output2"></div>
    <div id="output3"></div>
    <div id="output4"></div>
    <div id="output5"></div>
    <div id="output6"></div>

    <script src="events.js"></script>
</body>

</html>


CSS:
Code:

#testflaeche {
    background-color: lightblue;
    border: 1px solid black;
    width: 300px;
    height: 400px;
}

#output {
    background-color: lightgrey;
    border: 1px solid black;
    width: 300px;
    height: 20px;
    margin-top: 10px;
}

#output2 {
    background-color: lightgrey;
    border: 1px solid black;
    width: 300px;
    height: 20px;
    margin-top: 10px;
}

#output3 {
    background-color: lightgrey;
    border: 1px solid black;
    width: 300px;
    height: 20px;
    margin-top: 10px;
}

#output4 {
    background-color: lightgrey;
    border: 1px solid black;
    width: 300px;
    height: 20px;
    margin-top: 10px;
}

#output5 {
    background-color: lightgrey;
    border: 1px solid black;
    width: 300px;
    height: 20px;
    margin-top: 10px;
}

#output6 {
    background-color: lightgrey;
    border: 1px solid black;
    width: 300px;
    height: 20px;
    margin-top: 10px;
}

JS:
Code:

document.addEventListener('DOMContentLoaded', init);
var z = 0;

function init() {
    document.getElementById('testflaeche').addEventListener('click', mouseclicked);
    document.getElementById('testflaeche').addEventListener('dblclick', mousedoubleclicked);
    document.getElementById('testflaeche').addEventListener('mousemove', mousemoved);
    document.getElementById('testflaeche').addEventListener('mousedown', down);
    document.getElementById('testflaeche').addEventListener('mouseup', up);
    document.getElementById('testflaeche').addEventListener('mouseout', out);
    document.getElementById('testflaeche').addEventListener('mouseover', mIn);
    document.getElementById('testflaeche').addEventListener('wheel', mousewheel);


}

function mouseclicked(event) {


    var x = event.clientX;
    var y = event.clientY;
    var coords = "X coords: " + x + ", Y coords: " + y;
    document.getElementById('output').innerHTML = coords;


}

function mousedoubleclicked(event) {

    var x = event.clientX;
    var y = event.clientY;
    var coords = "X coords: " + x + ", Y coords: " + y;
    var clicked = "Doppelklick " + coords;
    document.getElementById('output2').innerHTML = clicked;

}

function mousemoved(event) {


    var x = event.clientX;
    var y = event.clientY;
    var coords = "X coords: " + x + ", Y coords: " + y;
    document.getElementById('output3').innerHTML = coords;
}

function down(event) {
    document.getElementById('output4').innerHTML = "Gedrueckt";
}

function up(event) {
    document.getElementById('output4').innerHTML = " Nicht Gedrueckt";
}

function out(event) {
    document.getElementById('output5').innerHTML = " Maus raus";

}

function mIn(event) {
    document.getElementById('output5').innerHTML = " Maus drin";

}

function mousewheel(event) {
    z++
    if (z >= 1000) {
        document.getElementById('output6').innerHTML = z + "  langeweile ?";
    } else {
        document.getElementById('output6').innerHTML = z
    }
}

MfG
Phil

Phil

Anzahl der Beiträge : 2
Anmeldedatum : 05.02.18

Nach oben Nach unten

Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten