Jump to content
php.lv forumi

Atkārtots kods jQuery


mandarīnpīle

Recommended Posts

Ir html fails ar css un javascript, kuram vajadzētu darboties sekojoši:

 

1.) Ir liels pelēks kvadrāts, DIV elements, kurā, ieklišķinot ar peli un neatlaižot velkot, nemitīgi tiek izdarīts ieraksts par to, ka notiek vilkšana.

 

2.) Tad, kad pele tiek atlaista, tiek unbindots mousemove events un DIVā tiek ierakstīts, ka vilkšana pārtraukta.

 

Problēma - ierakstam, ka vilkšana pārtraukta, loģiski būtu jāparādās tikai vienu reizi, bet tā nenotiek. Jo vairāk reižu tiek izdarīta tā draggošana un peles atlaišana, jo ar katru reizi tiek izdarīts par vienu ierakstu vairāk. Zemāk ir viss kods vienā failā un arī pievienots kā pielikums.

 

Kur ir problēma, kāpēc tas ieraksts neparādās tikai vienu reizi?

 

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<style type="text/css">
		#feedback{
			background-color: #3D3F36;
			color:white;
			padding-left: 10px;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			overflow: scroll;
			width: 500px;
			height: 300px;
		}
	</style>
</head>
<body>
	<div id="feedback">Ieklikšķini šeit ar peli un velc. Pēc mirkļa atlaid.<br/></div>
</body>
</html>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
time = new Date().getHours()+':'+new Date().getMinutes()+':'+new Date().getSeconds();


	//Izpildīt kodu pēc mouse down eventa
	$('#feedback').mousedown(function(){

		//Kad pele ir nospiesta un to kustina, #feedback div'ā ierakstīt, ka notiek vilkšana
		$(document).mousemove(function(){

			//Ieraksts
			$('#feedback').append(time+' you are dragging<br/>'); 
			
			//Div'a automātiska aiztīšana uz leju līdz jaunākajam ierakstam
			document.getElementById("feedback").scrollTop = document.getElementById("feedback").scrollHeight;
		});


		//Kad atlaiž peli, pārtrauc tās izsekošanu
		$(document).mouseup(function(){

			//Peles kustības izsekošanas pārtraukšana
			$(document).unbind('mousemove');

			//Ieraksts, kas kaut kāda iemesla pēc tiek izdarīts vaiŗāk nekā vienu reizi. Kāpēc?
			$('#feedback').append(time+' you just stopped dragging<br/>');

			//Div'a automātiska aiztīšana uz leju līdz jaunākajam ierakstam
			document.getElementById("feedback").scrollTop = document.getElementById("feedback").scrollHeight;
		});
	});
</script>

 

 

 

index_test.html

Link to comment
Share on other sites

$(document).mouseup iznes ārpus $('#feedback').mousedown funkcijas

 

jo mousemove ta tiek unbindots, bet ne mouseup, un tas ar katru mousedown tiek piebindots klāt

 

un izmanto labāk jsfiddle, lai parādītu piemēru

Edited by indoom
Link to comment
Share on other sites

$(document).mouseup iznes ārpus $('#feedback').mousedown funkcijas

 

jo mousemove ta tiek unbindots, bet ne mouseup, un tas ar katru mousedown tiek piebindots klāt

 

un izmanto labāk jsfiddle, lai parādītu piemēru

 

Ou, ok, sapratu. Nezināju, ka jQuery tā darbojas.

 

Manuprāt, pareizāk gan būtu nevis iznest $(document).mouseup ārpus $('#feedback').mousedown, bet gan tūlīt tur pat aiz mousemove unbindot arī mouseup, lūk, šādi: $(document).unbind('mousemove mouseup');

 

Tevis ieteiktajā gadījumā uz katru mouseup JEBKUR DOKUMETNĀ visu laiku tiktu nevajadzīgi veikta unbind darbība, bet šādi to veic tikai pēc tam, kad tā izdarīta iekš #feedback DIV'a un sākusies vilkšana.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...