Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: js funkcje i obsługa zdarzeń
Forum PHP.pl > Forum > Po stronie przeglądarki
marcus753
zastanawiam się nad tym jak z poziomu funkcji sprawdzić czy dane zdarzenie zostało wywołane a konkretniej:

onMouseUp="funkcja()" onMouseDown="funkcja();"

jak nacisnę klawisz myszy funkcja ma się uruchomić jak go puszczę funkcja ma się zakończyć jak coś takiego zrobić ? kombinuje czytam i guzik mi wyszedł ;/
lord_t
A co Ty chcesz osiagnąć? Co ta funkcja ma robić?
marcus753
najedziesz myszką na element wywołujesz funkcje funkcja np. coś tam liczy i po zjechaniu myszką z tego elementu funkcja przestaje liczyć.

co do liczenia może być to np. czas przez jaki kursor byl na danym elemencie...
lord_t
Skorzystaj z setInterval i clearInterval.
marcus753
ehh nie do końca o to mi chodziło podałeś mi funkcje zatrzymującą czas a mi chodziło o możliwość zatrzymania czasu podam go na konkretnym przykładzie:

mam taki skrypcik :

  1.  
  2. <!-- presented by javascripts.pl -->
  3.  
  4. <form name="Show">
  5.  
  6. X <input type="text" name="MouseX" value="0" size="4"><br />
  7.  
  8. Y <input type="text" name="MouseY" value="0" size="4"><br />
  9.  
  10. </form>
  11. <script type='text/javascript'>
  12.  
  13. <!--
  14.  
  15. var IE = document.all?true:false;
  16.  
  17. if (!IE) document.captureEvents(Event.MOUSEMOVE)
  18.  
  19. document.onmousemove = getMouseXY;
  20.  
  21. var tempX = 0;
  22.  
  23. var tempY = 0;
  24.  
  25. function getMouseXY(e) {
  26.  
  27. if (IE) { // grab the x-y pos.s if browser is IE
  28.  
  29. tempX = event.clientX + document.body.scrollLeft;
  30.  
  31. tempY = event.clientY + document.body.scrollTop;
  32.  
  33. }
  34.  
  35. else { // grab the x-y pos.s if browser is NS
  36.  
  37. tempX = e.pageX;
  38.  
  39. tempY = e.pageY;
  40.  
  41. }
  42.  
  43. if (tempX < 0){tempX = 0;}
  44.  
  45. if (tempY < 0){tempY = 0;}
  46.  
  47. document.Show.MouseX.value = tempX;
  48.  
  49. document.Show.MouseY.value = tempY;
  50.  
  51. return true;
  52.  
  53. }
  54.  
  55. //-->
  56.  
  57. </script>
  58.  
  59. <!-- presented by javascripts.pl --><br />
  60. <br />


dopisałem sobie jeszcze taki kodzik:

  1. <div style="width:100px;height:100px; overflow:hidden;"><div id="link1" onMouseUp="Obrazek();" onMouseDown="Obrazek();" style="margin-top:0px;margin-left:0px; width:500px; height:500px;background-image:url(http://jakies_zdjecie.jpg)">c</div></div>


i jak klikne na zdjęcie wszystko się ładnie załącza problem w tym co mam zrobić aby jak puszcze klawisz myszy funkcje przestawały się dalej wykonywać ;/

chodziło mi o sam mechanizm takiego wyłączenia funkcji przez zdarzenie efekt ma byc podobny do tego z zumi.pl

Pozdrawiam i mam nadzieje że ktoś mi pomoże będę bardzo wdzięczny
zegarek84
dla pseudo kodu co podałeś wyżej przy zdarzeniu onmouseup wyczyść listenera na onmousemove (akurat tak jak robisz to np. przypisz pustą funkcję)

a najlepiej to daj przykład online gdyż w pseudokodzie javascript nie ma funkcji obrazek() a niżej na mousedown i up odwołujesz się do tej funkcji...
marcus753
Wybacz, zjadło mi jedna linijke...

link ze skryptem nad ktorym pracuje -->http://www.marcus.osa.pl/js2.html

jak kilkam to sie przesowa chcialbym ze jak puszcze klawisz to sie zatrzymuje i nie mam pojecia jak to zrobic !?
zegarek84
niestety wczoraj bylem w pracy... ale po zatym pisałem co zrobić (akurat tu element masz wewnątrz innego i działało tylko puki myszką nie wyjechałeś poza obszar - co mogło dać Ci coś do myślenia ;p)...

i zamiast podpinać zdarzenia tak jak podpinasz poczytaj o addEventListener...

źródła nawet Ci się nie chciało sformatować o i ja nie formatowałem (na szybko zmieniłem w operze i masz gotowca - na przyszłość pomyśl winksmiley.jpg )

a i pytanie czy to jest poprawny html?? ;p [za Ciebie nie będę pisał początku, końca i innych ;p
  1. <!-- presented by javascripts.pl -->
  2. <form name="Show">
  3. X <input type="text" name="MouseX" value="0" size="4"><br />
  4. Y <input type="text" name="MouseY" value="0" size="4"><br />
  5. </form>
  6.  
  7. <script type='text/javascript'>
  8. <!--
  9. c=0;
  10. d=0;
  11. function stop(){
  12. document.onmousemove=null;
  13. document.onmouseup=null;
  14. }
  15.  
  16. function Obrazek(){
  17. document.onmouseup=stop;
  18. var IE = document.all?true:false;
  19. if (!IE) document.captureEvents(Event.MOUSEMOVE)
  20. document.onmousemove = getMouseXY;
  21. var tempX = 0;
  22. var tempY = 0;
  23. function getMouseXY(e) {
  24. if (IE) { // grab the x-y pos.s if browser is IE
  25. tempX = event.clientX + document.body.scrollLeft;
  26. tempY = event.clientY + document.body.scrollTop;
  27. }
  28. else { // grab the x-y pos.s if browser is NS
  29. tempX = e.pageX;
  30. tempY = e.pageY;
  31. }
  32. if (tempX < 0){tempX = 0;}
  33. if (tempY < 0){tempY = 0;}
  34. document.Show.MouseX.value = tempX;
  35. document.Show.MouseY.value = tempY;
  36. if(c==0){
  37. c=tempY;
  38. }
  39.  
  40. if(d==0){
  41. d=tempX;
  42. }
  43. document.getElementById('link1').style.marginTop = (tempY-c);
  44. document.getElementById('link1').style.marginLeft = (tempX-d);
  45. document.getElementById('link').style.marginTop = (tempY-c);
  46. document.getElementById('link').style.marginLeft = (tempX-d);
  47.  
  48. return true;
  49. }}
  50. //-->
  51. <!-- presented by javascripts.pl --><br />
  52. <div id="javascriptspl" align="center"><a href="http://www.javascripts.pl/javascript.html" title="Darmowe Java Skrypty" target="_blank">Darmowe Java Script</a></div>
  53. <br />
  54.  
  55. <!-- <div style="width:100px; margin:0px; height:100px; background-color:red;" onclick="Obrazek();"
  56. id="link">wiecej</div>-->
  57.  
  58. <div style="width:100px;height:100px; overflow:hidden;"><div id="link1" onmousedown="Obrazek();" style="margin-top:0px;margin-left:0px; width:500px; height:500px;background-image:url(http://photos.hotele.pl/krakow_qubus_hotel_krakow_1_3.jpg)">c</div></div>dsf
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.