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

Das Forum der ITA-M


Mouseevents

ITA Forum :: ITA-Overflow :: HTML, JS & CSS

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

ITA Forum :: ITA-Overflow :: HTML, JS & CSS

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