Meerdere onClicks in een tabel - Softwareontwikkeling

zondag 30 oktober 2005 15:44

Acties:

Topicstarter

Hallo,
Ik zit met het volgende probleem:

Ik heb een tabel waarvoor een onClick actie is ingesteld.
In dat tabel kunnen er o.a. tekst en plaatjes in voorkomen, die zelf ook gelinkt kunnen zijn (d.m.v <a href> of weer een onClick).

Als ik nu op de tabel klik, gaat alles goed en de onClick actie wordt uitgevoerd. Maar als ik op een van de links klik, worden de beide onClicks uitgevoerd. Het is hier natuurlijk de bedoeling dat alleen de link geactiveerd wordt en niet de onClick van de tabel.

Heeft iemand een idee hoe ik dit kan oplossen?

Hieronder is een simpele uitvoering van mijn tabel te zien.

Alvast bedankt. $_/-\o_$

HTML:

<html>
    <head>
        <title></title>
    </head>
    <body>
        <table width="150" border="1" onclick="alert('Actie 1 - View info')">
          <tr>
            <td>Text text text text text text text text text text</td>
          </tr>
          <tr>
            <td><a href="#" onClick="alert('Actie 2 - Add')">Add</a></td>
          </tr>
        </table>
    </body>
</html>

[ Voor 17% gewijzigd door Nariman op 30-10-2005 16:16 ]

zondag 30 oktober 2005 15:53

Acties:

Civil

Waarom zit die onclick op de hele tabel, en wat is de actie die dan wordt uitgevoerd ?

zondag 30 oktober 2005 15:57

Acties:

BasieP

civil ff lezen, nu worden ze allebij uitgevoerd als hij op een onclick in de a klikt.

@TS:
het is helemaal correct zoals het nu gaat. wat jij wilt kan wel, maar zul je zelf moeten proggen.
ik gok dat actie1 eerst word uitgevoerd en dan actie2
je zou een variable kunnen gebruiken die kijkt op welke tijd jij actie1 aanroept
als je dan actie2 aanroept en de tijd van actie1 is gelijk aan die van actie2 (in seconden) dan voer je alleen actie 2 uit.

het is geen mooie oplossing, maar dat is een onclick op een complete table ook niet

[ Voor 10% gewijzigd door BasieP op 30-10-2005 15:58 ]

This message was sent on 100% recyclable electrons.

zondag 30 oktober 2005 16:06

Acties:

Nariman

Topicstarter

Civil schreef op zondag 30 oktober 2005 @ 15:53:
Waarom zit die onclick op de hele tabel, en wat is de actie die dan wordt uitgevoerd ?

Het is voor een shopping systeem.
Als je op de tabel klikt zie je meer info over een item en als je op de 2de onclick klikt wordt wordt de item toegevoegd aan winkelwagen.

zondag 30 oktober 2005 16:07

Acties:

Nariman

Topicstarter

BasieP schreef op zondag 30 oktober 2005 @ 15:57:
ik gok dat actie1 eerst word uitgevoerd en dan actie2

Het gaat nu anders om, dus eerst actie 2 en dan 1.
Ik zit inderdaad ook te denken aan zoiets als jij voorstelt, maar ik w8 nog ff de reacties af.
Mischien zijn er nog ander oplossingen hiervoor.
Tnx

zondag 30 oktober 2005 16:08

Acties:

BasieP

je kan ook de eerste onclick op de eerste tr zetten, en de tweede op de tweede..
weet niet hoe je layout is, maar dat lost wel een berg op

This message was sent on 100% recyclable electrons.

zondag 30 oktober 2005 16:10

Acties:

Erkens

Fotograaf

Je kan met die onclick op de table toch gewoon kijken of het element waarop je geclicked hebt die a-tag is?
Eventueel nog een onclick op die a-tag toevoegen met een "return false" zodat de link niet gebruikt wordt

zondag 30 oktober 2005 16:13

Acties:

Nariman

Topicstarter

BasieP schreef op zondag 30 oktober 2005 @ 16:08:
je kan ook de eerste onclick op de eerste tr zetten, en de tweede op de tweede..
weet niet hoe je layout is, maar dat lost wel een berg op

Dat gaat qua layou niet werken. elke tabel dient zelf als een grote knop. de eerste onClick moet dus echt op de hele tabel.

zondag 30 oktober 2005 16:13

Acties:

Creepy

Tactical Espionage Splatterer

Javascript? HTML? In dat in Programming & Webscripting? * Creepy gooit dit topic over de schutting naar Webdesign & Graphics.

Zie ook Over HTML, CSS, JavaScript, Flash en Director topics *12-05*

"I had a problem, I solved it with regular expressions. Now I have two problems". That's shows a lack of appreciation for regular expressions: "I know have _star_ problems" --Kevlin Henney

zondag 30 oktober 2005 16:19

Acties:

Nariman

Topicstarter

Erkens schreef op zondag 30 oktober 2005 @ 16:10:
Je kan met die onclick op de table toch gewoon kijken of het element waarop je geclicked hebt die a-tag is?
Eventueel nog een onclick op die a-tag toevoegen met een "return false" zodat de link niet gebruikt wordt

Ik heb net dit uigeprobeert, maar het werkt niet:

HTML:

1	<a href="#" onClick="alert('Actie 2'); return false;">

zondag 30 oktober 2005 16:19

Acties:

Erkens

Fotograaf

je leest niet

zondag 30 oktober 2005 16:39

Acties:

BasieP

erkens bedoelt dat jij in die onClick een functie aanroept.
die functie gaat een aantal dingen checken en misschien doen.

This message was sent on 100% recyclable electrons.

zondag 30 oktober 2005 21:12

Acties:

faabman

Nariman schreef op zondag 30 oktober 2005 @ 16:19:
[...]

Ik heb net dit uigeprobeert, maar het werkt niet:
HTML:
1
<a href="#" onClick="alert('Actie 2'); return false;">

Lees het eerste stukje van Erkens reply nog eens

En lees daarvoor anders ffies de "events" tutorial van QuirksMode door http://www.quirksmode.org/js/introevents.html

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

zondag 30 oktober 2005 21:21

Acties:

Verwijderd

zoek eens op event bubbling, want da's precies wat hier aan de hand is. Wat je wilt is de bubble cancellen

zondag 30 oktober 2005 22:30

Acties:

André

Analytics dude

aanvulling op mophor: cancelBublle is wat je zoekt.

maandag 31 oktober 2005 20:20

Acties:

Nariman

Topicstarter

cancelBubble is inderdaad wat ik zocht en het werkt perfect.

Ik wil iedereen bedanken voor jullie reacties. $_/-\o_$

Voor de mensen met hetzelfde probleem: in de code hieronder is een voorbeeld te zien van cancelBubble:

HTML:

<html>
    <head>
        <title></title>
    </head>
    <body>
        <table width="150" border="1" onclick="alert('Actie 1 - View info')">
          <tr>
            <td>Text text text text text text text text text text</td>
          </tr>
          <tr>
            <td><a href="#" onClick="event.cancelBubble=true; alert('Actie 2 - Add')">Add</a></td>
          </tr>
        </table>
    </body>
</html>

maandag 31 oktober 2005 20:26

Acties:

BasieP

leuk dat je het antwoord ook post

zo blijft got een knowledgebase, ipv een forum met alleen maar vragen

This message was sent on 100% recyclable electrons.

maandag 31 oktober 2005 20:43

Acties:

Nariman

Topicstarter

BasieP schreef op maandag 31 oktober 2005 @ 20:26:
leuk dat je het antwoord ook post

zo blijft got een knowledgebase, ipv een forum met alleen maar vragen

Dat vind ik ook. Dat moet eigenlijk iedereen doen

maandag 31 oktober 2005 23:34

Acties:

wizzkizz

smile...tomorrow will be worse

Nariman schreef op maandag 31 oktober 2005 @ 20:43:
[...]

Dat vind ik ook. Dat moet eigenlijk iedereen doen

alleen is die oplossing wel IE only

Make it idiot proof and someone will make a better idiot.
Real programmers don't document. If it was hard to write, it should be hard to understand.

dinsdag 1 november 2005 00:13

Acties:

Nariman

Topicstarter

wizzkizz schreef op maandag 31 oktober 2005 @ 23:34:
[...]

alleen is die oplossing wel IE only

Dat is zeker niet het geval.
Ik heb het ook op Firefox en Opera 8 getest, voordat ik het de oplossing ging posten.

dinsdag 1 november 2005 00:26

Acties:

crisp

Devver

Pixelated

OMFG, ze hebben dus ook support voor IE-propriety event-properties ingebakken in Gecko

Waar moet dat heen in deze wereld? (gelukkig zijn er ook nog Safari en Konqueror

)
Anyway, voor standards-compliant browsers dien je dus event.stopPropagation() te gebruiken...

[ Voor 12% gewijzigd door crisp op 01-11-2005 00:29 ]

Intentionally left blank

Pagina: 1

Reageer