JavaScript onDblClick olayı, bir çok sayfa elementinde, elemente fare ile çift tıklandığı zaman gerçekleşir.
Aşağıdaki örnek JavaScript onDblClick olay tutucuyu kullanarak div ile oluşturulan kutucuğun arkaplan renginin her çift tıklamada değişerek sırasıyla Kırmızı, Yeşil, Mavi ve Beyaz olmasını sağlar.
Kutunun içinde çift tıklayınız.
<html>
<head>
<title>JavaScript onDblClick Olay tutucu örneği</title>
<script type="text/javascript">
var Degisken = 0;
function Renk()
{
var KutuRengi = document.getElementById('Kutu');
switch(Degisken)
{
case 0: KutuRengi.style.backgroundColor = "#e04040"; // Kırmızı
Degisken++;
break;
case 1: KutuRengi.style.backgroundColor = "#40d040"; // Yeşil
Degisken++;
break;
case 2: KutuRengi.style.backgroundColor = "#4080f0"; // Mavi
Degisken++;
break;
default:KutuRengi.style.backgroundColor = "#ffffff"; // Beyaz
Degisken = 0;
break;
}
}
</script>
</head>
<body>
Kutunun içinde çift tıklayınız.
<div style="width:100px;
height:100px;
border: solid 1px Black;
text-align:center;
background-color:#ffffff;"
onDblClick="Renk()"
id="Kutu"></div>
</body>
</html>
Örneğin, HTML kısmında onDblClick olayı tetiklendiği zaman Renk fonksiyonunu çağıran bir div elementi aşağıdaki gibi tanımlanmıştır.
<div .... onDblClick="Renk();" id="Kutu">
Her çift tıklamada aşağıdaki olaylar gerçekleşir:
- Global olarak tanımlanmış Degisken switch bloğu içinde case deyimi ile kontrol edilerek,
- '0' ise kutu arkaplan rengi Kırmızı yapılarak Degisken değeri 1 artırılır. break ile switch bloğundan çıkılır.
- '1' ise arkaplan rengi Yeşil yapılarak Degisken 1 artırılır. break ile blokdan çıkılır.
- '2' ise arkaplan rengi Mavi yapılarak Degisken 1 artırılır. break ile blokdan çıkılır.
- 0, 1 veya 2 değilse arkaplan rengi Beyaz yapılarak Degisken '0' sıfıra eşitlenir. break ile blokdan çıkılır.