ugrás a tartalomhoz

onClick event kezelése

H.Z. v2 · 2011. Júl. 14. (Cs), 14.04
Ha mondjuk egy táblázat elemeire ráteszek egy onclick-t, a meghívott függvény értesülhet valahogyan mondjuk az adott elem ID-jéről?
Kicsit konkrétabban:
<script>
function fv(){
   ... itt van-e lehetőség lekérni azt az "x1"-t? ...
}
</script>
...
<table>
...
<td id="x1" onClick="fv()"> ... </td>


Mindezt úgy, hogy IE7-ben is működjön és a meghívott fv paraméter listáján ottmaradjon az a bizonyos event object.
(ha nem adok át paramétert, akkor úgy tudom, automatikusan kap egy Event típusú objektumot, aminek pl. FF alatt van egy currentTarget attribútuma, de ez IE alatt nem működik, ha meg a hívásba beírom az id-t is, akkor mi lesz az eventtel?)
‹ Firefox belső működés debuggolása A böngésző default működésének tiltása Internet Explorer 8-ban ›
 ■
1

Tudtommal, ha egy függvényt

Hidvégi Gábor · 2011. Júl. 14. (Cs), 14.21
Tudtommal, ha egy függvényt eseménynél hívsz meg, mint a példádban, akkor a "this" az aktuális HTML elemre fog hivatkozni. Tehát elvileg a this.id az az adott td id-je.

Csak azért vagyok kicsit bizonytalan, mert ezer éve nem írtam HTML kódba ilyen módon eseménykezelőt, mindig utólag rendelem hozzá az adott elemhez. Szóval ki kell próbálni.
2

Tankjú, kipróbáltam, nem

H.Z. v2 · 2011. Júl. 14. (Cs), 14.23
Tankjú, kipróbáltam, nem nyert...
A meghívott függvényben az alert(this.id); azt mondja, hogy undefined, az alert(this); szerint egy window object a this.
(legalábbis FF-ban)
3

document.getElementById('x1')

Hidvégi Gábor · 2011. Júl. 14. (Cs), 14.34
document.getElementById('x1').onclick = fv;

így működik, ráadásul szebb is. HTML-be ne égess be függvényhívásokat, mint ahogy stílusokat sem illik.
5

Hmmmm... Tény, szebbnek

H.Z. v2 · 2011. Júl. 14. (Cs), 15.16
Hmmmm...
Tény, szebbnek tűnik.
De ha rengeteg sorhoz kell hozzárendelni egy-egy onclick action-t? Kicsit lassíthatja az oldal működését, ha egy (költői túlzás következik! ;-) ) egy ezer soros táblázat minden egyes sorához így rendelem hozzá, nem?

Arról nem beszélve, hogy ebben az esetben az onclick-et beállító javascript kódnak is konkrétan tudnia kell, hogy milyen ID-ket használok és a PHP kódnak is, ami előállítja magát a listát. (?? bár ha jobban meggondolom, az ID-ket akár a JS is osztogathatja, a PHP-nek nem kell ismernie - így marad a sebesség kérdése)
11

bubbling

Poetro · 2011. Júl. 14. (Cs), 16.45
Akkor hasznát veszed az event bubbling nevű jelenségnek. Azaz egz feljebbi szinthez (mondjuk a táblázat) adod hozzá az eseménykezelőt, és megnézed, mi volt az esemény eredeti célpontja.
4

Nem új cikk, de érdemes elolvasni

thgab · 2011. Júl. 14. (Cs), 15.02
http://weblabor.hu/cikkek/diszkretjavascript
6

Köszi...

H.Z. v2 · 2011. Júl. 14. (Cs), 15.24
Részben ismét kiderült, hogy feltaláltam a kereket :-) (hogy a HTML-be nem teszek JS-t, hanem egy külső file-ból linkelem)
részben sok érdekes dolog van benne, amikre nem gondoltam volna.
12

Facebook

pkadam · 2011. Júl. 14. (Cs), 18.14
A cikket olvasva kipróbáltam a Facebook-ot letiltott JavaScripttel: természetesen használhatatlan. Viszont egy dolog mégis működik, aminek elvileg nem kéne :) A "Profilom" hivatkozás onmouseover-nél megjeleníteni a menüt. Szerintetek JS nélkül ezt mégis hogyan tudja? A forráskódból nem derült ki, hogy kerülik meg.
13

CSS - a pontos módszert most

H.Z. v2 · 2011. Júl. 14. (Cs), 18.22
CSS - a pontos módszert most nem tudom, de már a 2-es CSS-ben is van ilyen lehetőség. (bővebben a www.w3schools.com-on a CSS szekcióban)
15

egyes böngészőkön nem csak az

Karvaly84 · 2011. Júl. 14. (Cs), 18.40
egyes böngészőkön nem csak az a elemre működik a :hover pszeudo osztály hanem minden másra is, így lehetséges.
16

IE6

Poetro · 2011. Júl. 14. (Cs), 18.41
Csak IE6 és régebbi böngészőkön nem működik, ami már jó ideje eleve nem támogatott szinte sehol.
14

A forráskódból nem derült ki,

kuka · 2011. Júl. 14. (Cs), 18.29
A forráskódból nem derült ki, hogy kerülik meg.
CSS:

#navAccount.openToggler ul, .no_js #navAccount:hover ul {
    display: block;
}
19

overflow

pkadam · 2011. Júl. 14. (Cs), 18.59
Én az overflow-t váltom hidden-ről visible-re, mert ha eredetileg display:none van, akkor hogyan érzékeli, hogy fölötte van az egér? :)
20

Elemezd a Facebook

kuka · 2011. Júl. 14. (Cs), 19.06
Elemezd a Facebook forráskódját Firebug segítségével. (A fentebbi kód onnan lett idézve.)

A div érzékeli :hover eseményt és a benne levő ul láthatóságát változtatja.
23

Jogos

pkadam · 2011. Júl. 14. (Cs), 19.20
Valóban, az ul-t kihagyta a szemem. És köszönöm, hogy megkerested a css-ben :)
22

<li id="navAccount"> <a

Karvaly84 · 2011. Júl. 14. (Cs), 19.16

<li id="navAccount">
    <a id="navAccountLink" class="topNavLink">
    <ul><!-- display:none; itt vannak a menüpontok --><ul>
</li>
itt látod hogy amikor a li#navAccount elem fölé ér a mutató eszköz akkor a benne lévő összes ul elem display stílus tulajdonságát block-ra állítja.
24

Köszönöm

pkadam · 2011. Júl. 14. (Cs), 19.32
És valóban, mennyivel egyszerűbb így, mint getElementById-vel állítgatni. Csak legalább arra is futotta volna Zuckerbergéknek, hogy a leveleket hajlandó legyen JS nélkül betölteni...
17

Túlbonyolítottam

pkadam · 2011. Júl. 14. (Cs), 18.53
Túl kézenfekvő volt a CSS-es megoldás, de tényleg nyilvánvaló. Az előbb kipróbáltam (az első komment után egyből leesett), és tulajdonképpen egyszerűbb is, mint onmouseover-ezni. Használtam már a :hover-t pl. táblázatsorra, de most valamiért átsiklottam felette. Köszi!

Megnéztem :active-val is (ugye az onclick mintájára), de valamiért csak egy pillanatra marad az. Ötlet? (div-ről van szó, talán csak az a bír aktív maradni?)
18

Megnéztem :active-val is

kuka · 2011. Júl. 14. (Cs), 18.56
Megnéztem :active-val is (ugye az onclick mintájára), de valamiért csak egy pillanatra marad az. Ötlet?
Miért, hány pillanatig kellene aktív maradjon?
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
21

:focus

pkadam · 2011. Júl. 14. (Cs), 19.16
Úgy emlékeztem, hogy az a addig aktív, amíg a fókusz rajta van. De erre a :focus kell, nyilván... Az viszont div-re nem játszik.

UPDATE: Ha :focus és :active is be van állítva, az a előbb aktív, aztán fókuszált (ahogy kell), az input viszont ilyenkor az aktív állapotot kihagyja (:focus nélkül rendesen felvillantja).
7

<!DOCTYPE html PUBLIC

Karvaly84 · 2011. Júl. 14. (Cs), 15.58

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>table</title>
<script type="text/javascript">
function fv(e) {
	var target = e.target || e.srcElement;
	alert(target.getAttribute('id'));
}
</script>
</head>
<body>
<table>
<tr>
<td id="x1" onclick="fv(event)">Click here!</td>
</tr>
</table>
</body>
</html>
8

Rosszul emlékszem, hogy a

H.Z. v2 · 2011. Júl. 14. (Cs), 16.10
Rosszul emlékszem, hogy a srcElement erősen böngészőfüggő, szabványosnak nem nevezhető dolog? Ezt kerestem egyébként, csak reggel óta nem jutott eszembe a neve, viszont... a w3schools.com-on nyomát sem találtam a ref.guide-ban.
9

jól emlékszel

Karvaly84 · 2011. Júl. 14. (Cs), 16.25
Az srcElement az IE 8-asig van 9-be már van target is. De egyébként azért írtam azt hogy:

var target = e.target || e.srcElement
mert ha az e.target hamiska akkor biztosak lehetünk benne, hogy az áldott jó Explorer-el van dolgunk és adjuk a target változóhoz a e.srcElement tulajdonságát. Egyébként a régebbi Explorer verzók nem adnak át semmit a függvénynek amiket az elemek attribútumaiban hívsz meg bizonyos eseményeknél. Explorerben az esemény objektuma window.event ami mindig a utolsó bekövetkezett eseményt tárolja. Tehát ezt az attribútumban át kel adni argumentumként. De ha nem adod át az se baj mert lehet azt is csinálni, hogy:

function fv(e) {
        e = e || window.event
	var target = e.target || e.srcElement;
	alert(target.getAttribute('id'));
}
10

Bocs, kicsit szétszórt vagyok

H.Z. v2 · 2011. Júl. 14. (Cs), 16.29
Bocs, kicsit szétszórt vagyok már megint... A target már nem jutott el a tudatomig.
25

Ez a megoldás nem jó

pinguka · 2011. Júl. 15. (P), 11.28
Ez a megoldás nem jó neked?

<script>
function fv(id){
   alert(id); // x1
}
</script>
...
<table>
...
<td id="x1" onclick="fv(this.id)"> ... </td>
26

Nem igazán

H.Z. v2 · 2011. Júl. 15. (P), 11.52
Ugyanis az átadott paraméterrel agyonvágod az egyébként alapértelmezett Event objektumot, ha jól tudom.
Egyébként picit feljebb lapozva ott a tökéletes megoldás. (3. és asszem, a 7. hozzászólás)
27

Ezt nem értem...

H.Z. v2 · 2011. Júl. 23. (Szo), 10.13
Úgy emlékeztem, hogy az onclick="fv()" attribútum beállításakor az event objektum automatikusan átadódik a fv() függvénynek.
Lehet, hogy rosszul emlékeztem?

Ki akartam próbálni valamit és már ott elakadtam, hogy FF alatt nem kapott paramétert a meghívott függvény.
28

Miért

Poetro · 2011. Júl. 23. (Szo), 13.25
Miért adódna át? Hiszen nem adod át. Mert egyszerűen paraméter nélkül hívod meg a fv függvényt. Ezért is kell kerülni azt, hogy a HTML-be kerüljön a működést leíró rész. A JavaScript kódnak a JavaScript kódban a helye, nem a HTML-ben, és akkor tiéd a működés feletti irányítás.
29

Nem tudom, eredetileg azt nem

H.Z. v2 · 2011. Júl. 23. (Szo), 14.06
Nem tudom, eredetileg azt nem értettem, hogy ha nem adok neki paramétert, akkor hogy kerül oda mégis.
Már csak azt lenne jó tudni, hogy ennyire rosszul emlékeztem vagy valami tutorialban szerepelt hibásan. Na mindegy, nincs jelentősége, csak meglepett itt hajnalok hajnalán. :)