Geri Dön
Anasayfa
Jquery Ders-24 .mousedown() ve .mouseup() Kullanımı
Jquery serimizin bu bölümünde .mousedown() ve .mouseup() methodlarını işleyeceğiz.Mousedown bildiğimiz click işlemini yapar.Clickten pek bir farkı yok mousedownun.Tek farklı özelliği click işlemi için tıkladığımızda tıklamadan elimizi çekince mouseupla bu anı yakalayabilmemiz.
Mousedown basılı tutunca mouseup tuştan elimizi çektiğimizde.
Kullanımı bu şekilde.
Genel örnek :
Görüntüsü :
Yukarıda kırmızı alana mouse ile tıklayıp elimizi çekmezsek süre sürekli artacak.Elimizi çektiğimizde süre duracaktır.Mousedown ve mouseup u bu şekilde işlemler için kullanabilirsiniz.
Mousedown basılı tutunca mouseup tuştan elimizi çektiğimizde.
$(".alan").mousedown(function(){
//Tıklandığında işlem
})
$(".alan").mouseup(function(){
//Tuştan elimizi çekince işlem
})Kullanımı bu şekilde.
Genel örnek :
<!DOCTYPE html>
<html lang="en">
<head>
<title>UstaDerslik</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(".alan").mousedown(function(){
art=1;//mouse ile tıklandığında artın değerini 1 yap
say();//say fonksiyonunu çağır
});
$(".alan").mouseup(function(){
art=0;//elimizi çekine artın değerini 0 yap.
});
});
var sure=0;
var art=0;
function say(){
if(art==1){//eğer art 1 ise
sure++;// sureyi 1 artır
document.getElementById("sure").innerHTML="Tıklama :"+sure;//sureyi ekrana yaz
setTimeout("say()",1000);//say fonksiyonunu tekrar çağır.
}
}
</script>
<style type="text/css">
.alan{width:100px;height:100px;background:red;}
</style>
</head>
<body>
<div class="alan"></div>
<div id="sure"></div>
</body>
</html>
Görüntüsü :
Yukarıda kırmızı alana mouse ile tıklayıp elimizi çekmezsek süre sürekli artacak.Elimizi çektiğimizde süre duracaktır.Mousedown ve mouseup u bu şekilde işlemler için kullanabilirsiniz.