Hiiri vasen-painike

<button onclick="onkoVasen()"> Klikkaa Mua ! </button>

<p id="teksti1"></p>

<script>
  function onkoVasen(event) {
    document.getElementById("teksti1").innerHTML = 
     "<b style='color:red'> Klikkasit hiiren vasenta ! </b>";
  }	
</script>

Hiiri vasemman tupla-klikkaaminen

Klikkaa Mua kahdesti !

<p ondblclick="onkoTupla()"> Klikkaa Mua kahdesti ! </p>

<p id="teksti2"></p>

<script>
  function onkoTupla(event) {
    document.getElementById("teksti2").innerHTML = 
     "<b style='color:red'> Klikkasit kahdesti vasemmalla ! </b>";
  }	
</script>
	

Hiiri painike painettu alas ja vapautettu

Painaessa punainen ja irrottaessa vihreä.

<p id="temppu1" onmousedown="hiiriAlas()" onmouseup="hiiriYlos()"> 
 Painaessa punainen ja irrottaessa vihreä.
</p>

<p id="teksti2"></p>

<script>
 function hiiriAlas() {
  document.getElementById("temppu1").style.color = "red";
 }

 function hiiriYlos() {
  document.getElementById("temppu1").style.color = "green";
 }	
</script>

Hiiri osoitin elementin sisään ja pois

<img onmouseenter="isoKuva(this)" onmouseleave="pieniKuva(this)" 
 border="0" src="JS_logo.jpg" alt="JS-logo" width="32" height="32">

<script>
 function isoKuva(x) {
  x.style.height = "64px";
  x.style.width = "64px";
 }

 function pieniKuva(x) {
  x.style.height = "32px";
  x.style.width = "32px";
 }	
</script>

Hiiri osoittimen koordinaatit

Tarvittavat CSS-muotoilut:
.keltaLaatikko {
  background: yellow;
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

<div class="keltaLaatikko" onmousemove="omaKeltanen(event)" onmouseout="nollaaSijainti()">
</div>

<p id="teksti3"></p>

<script>
 function omaKeltanen(e) {
  var x = e.clientX;
  var y = e.clientY;
  var sijainti = "X - Y koordinaatit: (" + x + "," + y + ")";
  document.getElementById("teksti3").innerHTML = sijainti;
 }

 function nollaaSijainti() {
  document.getElementById("teksti3").innerHTML = "";
 }	
</script>

Hiiri rulla

Siirrä hiiren osoitin yllä olevaan laatikkoon ja kokeile. Funktio vaihtaa laatikossa olevan tekstin fontin koon suuremmaksi.
Huom! Tapahtuma wheel ei toimi Safari ja IE8 (tai aiemmilla) selaimilla.

Tarvittavat CSS-muotoilut:
#zoomDIV {
  border: 1px solid green;
  padding: 10px;
}

<div id="zoomDIV">Esimerkissä käytetään <b>addEventListener( )</b> -metodia ja 
 <b>wheel</b> -tapahtumaa 
 kohdistaen tapahtuma <b>zoomDIV</b> -nimiseen elementtiin.<br>
 Pyöräytä hiiren päällä olevaa rullaa !
</div>

<p>Siirrä hiiren osoitin yllä olevaan laatikkoon ja kokeile. 
   Funktio vaihtaa laatikossa olevan tekstin fontin koon suuremmaksi.<br>
   <b>Huom!</b><br>
   Tapahtuma wheel ei toimi Safari ja IE8 (tai aiemmilla) selaimilla.
</p>

<script>
 document.getElementById("zoomDIV").addEventListener("wheel", hiiriRulla);

 function hiiriRulla() {
  this.style.fontSize = "35px";
 }
</script>

Hiiren painikkeet

<div onmousedown="hiiriPainike(event)" style="color:violet">
  Klikkaa hiiren eri painikkeilla tekstiä
  <p>
   0 = vasen - painike<br>
   1 = keski - painike (rulla)<br>
   2 = oikea -painike
  </p>

  <p><b>Huom !</b> Explorer 8 ja vanhemmissa eri numero-arvot:</p>

  <p>
   1 = vasen<br>
   4 = keskin<br>
   2 = oikea
  </p>
</div>

<script>
function hiiriPainike(event) {
  alert("Painoit hiiren painiketta: " + event.button)
}
</script>

Hiiren painikkeet

Huom ! Ei toimi IE8 tai vanhemmissa ja Safari selaimilla.

Painettu painike:

<div onmousedown="mikaNappi(event)"  style="color:SlateBlue">
 Paina jotain hiiren viidestä painikkeesta.
  <p>
   1 = vasen - painike<br>
   2 = oikea - painike<br>
   4 = keski - painike (rulla)<br>
   8 = neljäs - painike (yleensä selaimen "Back" -painike)<br>
   16 = viides (yleensä selaimen  "Seuraava" -painike)<br>
  </p>
</div>

<p><b>Huom !</b> Ei toimi IE8 tai vanhemmissa ja Safari selaimilla.</p>

<h2 style="color:red">Painettu painike: <span id="nappi"></span></h2>

<script>
 function mikaNappi(event) {
  var x = event.buttons;
  document.getElementById("nappi").innerHTML = x;
 }
</script>

Hiiren osoittimen koordinaatit

Klikkaa tätä tekstiä eri kohdista. Esimerkin koodauksella näytetään klikkauskohdan X- ja Y-koordinaatit.

<h3 onclick="tutkiKoordinaatit(event)">
 Klikkaa tätä tekstiä eri kohdista. Esimerkin koodauksella 
 näytetään klikkauskohdan X- ja Y-koordinaatit.</h3>

<p id="koordinaatit" style="color:Crimson"></p>

<script>
 function tutkiKoordinaatit(event) {
  var x = event.clientX;
  var y = event.clientY;
  var koord_pisteet = "X koordinaatti: " + x + ", Y koordinaatti: " + y;
  document.getElementById("koordinaatit").innerHTML = koord_pisteet;
 }
</script>

Onko Caps Lock valittuna

Klikkaa hiirellä lomakekenttää. Jos Caps Lock ei ole aktiivinen, vastaus on false, jos on aktiivinen vastaus on true.

Huom ! Metodi ei toimi Safari 10 ja IE 8 tai aikaisemmissa versioissa.

<p>Klikkaa hiirellä lomakekenttää. Jos Caps Lock ei ole aktiivinen, vastaus on false, 
   jos on aktiivinen vastaus on true.<h/p>

<input type="text" size="40" onmousedown="onkoCL(event)">

<p><b>Huom !</b> Metodi ei toimi Safari 10 ja IE 8 tai aikaisemmissa versioissa.</p>

<p id="capslokinTila" style="color:Crimson"></p>

<script>
function onkoCL(event) {
  var x = event.getModifierState("CapsLock");
  document.getElementById("capslokinTila").innerHTML = 
   "Caps Lock aktivointi-tilanne: " + x;
}
</script>

Meta-painike

Klikkaa hiirellä tämän tekstin alueella. Klikkaa uudelleen painamalla samaan aikaan näppäimistötä Windows tai jotain muuta meta painiketta.
* Mac-koneissa cmd on meta-painike *
(liittämällä onmousedown="isKeyPressed(event)" body-elementtiin meta toimii koko www-sivulla)

<p onmousedown="isKeyPressed(event)">
 Klikkaa hiirellä tämän tekstin alueella. Klikkaa uudelleen painamalla samaan aikaan 
 näppäimistötä Windows tai jotain muuta meta painiketta. <br> 
 * Mac-koneissa cmd on meta-painike * <br>
 (liittämällä onmousedown="isKeyPressed(event)" body-elementtiin meta toimii koko www-sivulla)
</p>

<script>
 function isKeyPressed(event) {
  if (event.metaKey) {
    alert("META-painike painettu.");
  } else {
    alert("META-painikketta ei painettu samaan aikaan.");
  }
 }
</script>

Onko ALT-painettuna

<div onmousedown="onkoALT(event)">
 <h2>Hiiri 1</h2>
 <span class="md-caption">Hiiren painike ja ALT-painike</span><br>
 <script>
  function onkoALT(event) {
   if (event.altKey) {
    alert(" ALT + hiiren painike!");
   } else {
      alert("Hiiren painike !");
     }
  }
 </script>
</div>

Hiiren osoitin elementin alueella

Siirrä hiiren osoitin tekstin päälle.

<p onmouseover="getRelatedElement(event)" style="color:#DA70D6">
  Siirrä hiiren osoitin tekstin päälle.
</p>

<script>
 function getRelatedElement(event) { 
   alert("Hiiren osoitin tapahtumaan liitetyssä " + 
   event.relatedTarget.tagName + " elementissä.");
 }
</script>

Hiiren X ja Y koordinaatit

Klikkaa hiirellä tätä tekstiä. Tekstin uudelleen klikkauksilla X- ja Y-koordinaatit vaihtuvat. Kokeile uudelleen klikkailemalla eri kohdita tekstiä.

<h3 onclick="showCoords(event)" style="color:#DA70D6">
 Klikkaa hiirellä tätä tekstiä. Tekstin uudelleen klikkauksilla X- ja Y-koordinaatit vaihtuvat. 
 Kokeile uudelleen klikkailemalla eri kohdita tekstiä.
</h3>
			 
<p id="XYkokeilu"  style="color:#DB70D6"></p>

<script>
 function showCoords(event) {
  var x = event.screenX;
  var y = event.screenY;
  var XjaY = "X kordinaatti: " + x + ", Y  kordinaatti " + y
  document.getElementById("XYkokeilu").innerHTML = XjaY;
 }
</script>

Hiiren kolme painiketta

Ei toimi IE8 ja vanhemmissa selaimissa.

<div onmousedown="mikaPainike(event)" style="color:#DA70D6">
  Klikkaa hiiren painikkeita tässä tekstissä.
  <p>1 = vasen painike</p>
  <p>2 = keski painike</p>
  <p>3 = Toikea painke</p>
</div>

<p><b>Ei toimi IE8 ja vanhemmissa selaimissa.</b></p>

<script>
 function mikaPainike(event) {
  alert("Painettu painike: " + event.which)
 }
</script>