Brainiac fyrir 14 árum, 11 mánuðum Fjöldi lestra: 1048

onClick mouse position

Ég er með script sem á að endurstaðsetja div þegar músinni er smellt útfrá því hvar músin er staðsett. Hér er alla vega kóðinn sem ég er með:

function PosNav(e) {
	var posx = 0;
	var posy = 0;
	if (!e) var e = window.event;
	if (e.pageX || e.pageY) 	{
		posx = e.pageX;
		posy = e.pageY;
	}
	else if (e.clientX || e.clientY) 	{
		posx = e.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		posy = e.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}
	// posx and posy contain the mouse position relative to the document
	// Do something with this information
	var NavDiv = document.getElementById('mainnav');
	var navX = posx - 150;
	var navY = posy - 150;
	NavDiv.style.top = navY.toString() + "px";
	NavDiv.style.left = navX.toString() + "px";
}
// Þessi function á að kalla á PosNav þegar það er klikkað á (held ég)
function doPosNav() {
	document.onclick = function(){ PosNav(); return false; }
}
window.onload = doPosNav(this);

Ég fékk fyrri hlutann frá quirksmode og ég skil hann ekki alveg en posx og posy á að innihalda staðsetningu músarinnar en það verður alltaf 0. Kannski skil ég bara ekki nógu vel hvað er að gerast en það virðist alla vega ekki neitt gerast.

Getur einhver hjápað?

halldor89 fyrir 14 árum, 11 mánuðum

Hvenær ertu að keyra þetta fall? Þú verður skrá þetta fall sem “event listener” til að fá gögn um window.event.

Held allavega að þetta virki eitthvað á þá leið.

“If it isn't documented, it doesn't exist”

Fyrra álit

Brainiac fyrir 14 árum, 11 mánuðum

Hvernig geri ég það? Ég keyri doPosNav þegar á window.onload og hugsunin með því er að það hlisti eftir músasmell og keyrir hitt fallið þegar músinni er smellt, þá á það að gefa upp mouse location og repositionar divið.

Ég er samt bara að byrja að læra á JS og þess vegna er þetta sennilega vel dodgy.. alla vega keyrist PosNav ekki… Geturðu hjálpað? :-)

Fyrra álit

davida fyrir 14 árum, 11 mánuðum

myndi skoða jQuery, það er þægilegra þegar það kemur að því að færa hluti með javascript, imo.

ég myndi gera þetta e-rn veginn svona:

<html>
	<head>
	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"> </script>
	<script type="text/javascript">
		$(document).ready(function() {
   		    $(this).click(function(e) {
       			var cssObj = {
           			'top'  : e.pageY - 100,
           			'left' : e.pageX - 100
       		    }
       			$("#doStuff").css(cssObj);
   			});
		});
		
		</script>
	
		<style>
		#doStuff {
			position:absolute;
			top:20px;
			left:20px;
			width:200px;
			height:200px;
			background:#F00;
		}
		</style>
	
	</head>
	<body>
		<div id="doStuff"></div>
	</body>
</html>

Engin ábyrgð tekin :P. Svo er bara að skipta út jquery fyrir local kopíu svo það þurfi nú ekki að hafa samband við googlecode í hvert skipti sem að síðan er refreshuð.

Fyrra álit

Brainiac fyrir 14 árum, 11 mánuðum

Töff.. þetta virkaði, en ef ég vil hafa right eða middle click sem eventinn, hvernig geri ég það?

Ég fann þetta í jQuery en ég skil ekki alveg hvernig þetta virkar:

		// Add which for click: 1 == left; 2 == middle; 3 == right
		// Note: button is not normalized, so don't use it
		if ( !event.which && event.button )
			event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
		return event;

get sem sagt bætt if(which == 2) til að finna middle click?

      $(document).ready(function() {
          $(this).click(function(e) {
             if(event.which == 2) {
             	var cssObj = {
               		'top' : e.pageY - 165,
               		'left' : e.pageX - 150
            }
             $("#mainnav").css(cssObj);
           });
             }
       });

Ég prófaði að gera þetta svona en það virkaði ekki :/ Hvernig á maður að nota þetta?

Fyrra álit

davida fyrir 14 árum, 11 mánuðum

Taktu eftir því að ég er að senda inn event hlut sem ég skýrði e. Svo til þess að nota button propertyið þarf ég að kalla í það frá tilvikinu sem varð til, þar sem að event er ekki static(eru static föll/breytur í javascript?). Þannig að þessi kóðabútur þinn yrði einhvern veginn svona:

		$(document).ready(function() {
   		    $(this).click(function(e) {
				if(e.button == 2) {
       				var cssObj = {
           				'top'  : e.pageY - 165,
           				'left' : e.pageX - 150
       		    	}
       				$("#doStuff").css(cssObj);
			    }
   			});
		});

Taktu þó eftir að þá opnast right click menuinn alltaf þegar þú hægri smellir. Það er hægt að disablea þetta, en það er ekki hægt í öllum vöfrum, svo að þetta er ekkert sérstaklega gott stöff að gera.

Fyrra álit

davida fyrir 14 árum, 11 mánuðum

Ég held stundum að ég kunni ekki að lesa, en jú, með e.button er hægt að vera með middle click, ma´lið er bara að ég er ekki með middleclick mús til þess að prófa þetta :S. Þú þyrftir að fikta þig e-ð áfram með þessu. Spurning er líka þar sem að það er kommentað í kóðabrotinu sem þú sendir inn að e.button sé ekki “normalized”, sem ég myndi þýða sem ekki staðlað, svo að revised útgáfa með rightclick væri:

		$(document).ready(function() {
   		    $(this).click(function(e) {
				if(e.which == 3 || e.button == 2) {
       				var cssObj = {
           				'top'  : e.pageY - 165,
           				'left' : e.pageX - 150
       		    	}
       				$("#mainnav").css(cssObj);
			    }
   			});
		});

Þá gerum við bara ráð fyrir báðum. Eins og ég skil þetta er e.which == 1 vinstri, e.which == 2 milli og e.which == 3 hægri, en aftur á móti e.button == 0 vinstri, e.button == 1 milli og e.button == 2 hægri.

Fyrra álit

Vefsíðugerð

Vefsíðugerð

Ofurhugar

Stjórnendur

Hverjir eru inni

Korkar - Javascript

onClick mouse position

Dýr

Dægurmál

Fræði

Leikir

Lífið

Lífsstíll

Margmiðlun

Menning

Skjár

Sport

Tónlist

Tækni

Vélar

Hugi