[js] onClick cancellen - Softwareontwikkeling

woensdag 15 september 2004 20:01

Acties:

Topicstarter

Ik heb een formulier met veel data dat gesubmit kan worden. De data staat in een tabel waarbij alles gescheiden staat in <td>'s. Voor ieder data-blokje staat ook een checkbox die je kunt aan en uitvinken. Om het de gebruiker makkelijk te maken heb ik in de <td> met data een onClick opgenomen die de checkbox ervoor aan- of uitvinkt.
Nou moest ik net alleen een wijziging maken en is er een <select> komen te staan in die tabel met data. Het probleem nu: op het moment dat je op die <select> klikt wordt de onClick van de <td> geactiveerd en zet ie een vinkje neer (of haalt 'm weg) en dat wil ik niet. Het enige wat ik kon bedenken (was meer een gok) was om in die <select> dit te zetten:
onClick="return false;"
Maar dat werkt dus niet.

Iemand enig idee hoe ik kan voorkomen dat het klikken op die select (als je iets gaat selecteren) die onClick van de <td> omzeilt?
Kon wel veel over onClick enzo met de search vinden, maar vond nergens iets wat me verder hielp

woensdag 15 september 2004 20:03

Acties:

André

Analytics dude

Je kunt in de functie waar de onclick naar verwijst controleren welk element het event getriggered heeft

[ Voor 3% gewijzigd door André op 15-09-2004 20:04 ]

woensdag 15 september 2004 20:07

Acties:

marty

Topicstarter

javascript is helaasch niet m'n sterkste punt. Zou je me een kleine trap in de goede richting kunnen geven hoe ik dat doe? Ik heb namelijk geen idee hoe ik daar achter moet komen

woensdag 15 september 2004 20:10

Acties:

faabman

marty schreef op 15 september 2004 @ 20:07:
Ik heb namelijk geen idee hoe ik daar achter moet komen

via de w3.org dom specificatie of via de MS SDK (en bij die laatste moet je wel goed opletten of je een standaard gebruikt of een ms methode)

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

woensdag 15 september 2004 20:16

Acties:

Skaah

Je kunt toch ook het bubble model wijzigen en dan het bubbelen stoppen? Zoek eens naar de website "quircksmode"

woensdag 15 september 2004 20:21

Acties:

André

Analytics dude

code:

<a href="" onclick="Bla(evt)">

<script type="text/javascript">
  function Bla(e)
  {
    alert(e.srcElement);
    alert(e.Target);
  }
</script>

Even uit mijn hoofd

woensdag 15 september 2004 20:40

Acties:

Verwijderd

Ik schop je maar meteen naar de plek waar je moet zijn: cancelBubble.

Wanneer je binnen het zwarte vlak klikt, verschijnt er een messagebox. Wanneer je op het dropdown menu klikt niet omdat je het bubbelen van het onclick event annuleert.

Code in werking: http://www.nextavenue.com/got/955975/

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title></title>
    <style type="text/css">
#div {
  width:        400px; 
  height:       400px;
  border:       1px solid #000;
}

#select {
  width:        200px; 
  left:         100px;
  top:          190px;
  position:     absolute;
}

h1 {
  margin-top:   20px;
  text-align:   center;
  font-family:  Verdana, Arial, Helvetica, sans-serif;
  font-size:    14px;
}
    </style>
    <script type="text/javascript">

window.onload = function () {
  var oDiv = document.getElementById("div");
  var oSelect = document.getElementById("select");

  oDiv.onclick = function () {
    alert('Editor nodig?');
  }

  oSelect.onclick = function (e) {
    if (!e) {
      e = window.event;
    }
    e.cancelBubble = true;
  }
}

    </script>
  </head>
  <body>
    <div id="div">
      <h1>
        <a href="www.nextavenue.com/development/?955975">
          Rediscover Content Management: NextAvenue
        </a>
      </h1>
      <select id="select">
        <option></option>
        <option>www.nextavenue.com</option>
      </select>
    </div>
  </body>
</html>

[ Voor 31% gewijzigd door Verwijderd op 15-09-2004 20:42 ]

woensdag 15 september 2004 20:51

Acties:

Bram77

Het kan ook simpeler.

code:

<SCRIPT>
function checkBox(obj){
 if(!document.formNaam.selectNaam.focus){
  obj.checked = true;
 }
}
</SCRIPT>

In de <TD> zet je > onClick="checkBox(document.formName.checkBoxName)" <

Niet getest, maar zou moeten werken.

woensdag 15 september 2004 21:49

Acties:

marty

Topicstarter

faabman schreef op 15 september 2004 @ 20:10:
via de w3.org dom specificatie of via de MS SDK (en bij die laatste moet je wel goed opletten of je een standaard gebruikt of een ms methode)

Het hele w3.org doorspitten zie ik niet zo zitten. Het punt is dat ik gewoon geen idee heb waar ik op moet zoeken. Zoek me al suf op pagina's met informatie over onClick, maar zonder succes.

Skaah schreef op 15 september 2004 @ 20:16:
Je kunt toch ook het bubble model wijzigen en dan het bubbelen stoppen? Zoek eens naar de website "quircksmode"

Ik heb geen idee wat ik me bij dat bubble gedoe moet voorstellen, maar

http://www.google.com/sea...ksmode.org%2F&safe=images

levef in iedergeval niets op

André schreef op 15 september 2004 @ 20:21:

code:

<a href="" onclick="Bla(evt)">

<script type="text/javascript">
  function Bla(e)
  {
    alert(e.srcElement);
    alert(e.Target);
  }
</script>

Even uit mijn hoofd

Dat ziet er opzich veelbelovend uit, maar krijg ik niet werkend in Mozilla. Die mekkert dat e.srcElement (het moet overigens e.srcElement.tagName zijn ben ik achter gekomen) geen properties heeft (en undefined is)

20:45: * marty gaat even voetbal kijken

Verwijderd schreef op 15 september 2004 @ 20:40:
Ik schop je maar meteen naar de plek waar je moet zijn: cancelBubble.

dit ga ik na de wedstrijd even proberen. thnx!

Bram77 schreef op 15 september 2004 @ 20:51:
Het kan ook simpeler.
code:
1
2
3
4
5
6
7
<SCRIPT>
function checkBox(obj){
 if(!document.formNaam.selectNaam.focus){
  obj.checked = true;
 }
}
</SCRIPT>
In de <TD> zet je > onClick="checkBox(document.formName.checkBoxName)" <

Niet getest, maar zou moeten werken.

het enige probleem is dat ik een variabel aantal selectboxjes heb

woensdag 15 september 2004 21:51

Acties:

André

Analytics dude

Dat mozilla het srcElement niet kent klopt, mozilla gebruikt daar target voor

woensdag 15 september 2004 21:57

Acties:

Bram77

het enige probleem is dat ik een variabel aantal selectboxjes heb

Kun je niet even een linkje posten en/of de scource. Dat maakt het al een stuk duidelijker.....

[ Voor 5% gewijzigd door Bram77 op 15-09-2004 22:01 ]

donderdag 16 september 2004 08:00

Acties:

marty

Topicstarter

Allen bedankt en met name André!

Dit is het stukje code wat ik nu gebruik:

JavaScript:

    var source;
    if (typeof e.target != 'undefined')
    {
        source = e.target;
    }
    else if (typeof e.srcElement != 'undefined')
    {
        source = e.srcElement;
    }
    if (source.tagName == "SELECT" || source.tagName == "OPTION")
    {
        // this comes from a click in the select-box, so we ignore it
    }
    else
    {
        // code uitvoeren
    }

dat cancelBubble werkte ook niet voor mij omdat je dan aan de id's van die elementen vast zit. En dat zijn er bij mij nogal wat en die hebben allemaal al een (variabele) naam.

donderdag 16 september 2004 08:15

Acties:

Verwijderd

je kan ook getElementsByTagName() gebruiken om alle SELECT objecten op te vragen...

donderdag 16 september 2004 09:39

Acties:

gvanh

Webdeveloper

Ik weet niet of ik nu helemaal mis zit, voor wat betreft het begrijpen van het probleem, maar zijn jullie op de hoogte van de '<label>' tag?

code:

1 2	<input type='checkbox' value='1' id='box1' name='cb'> <label for='box1'>Klik ook hier om de checkbox te checken</label>

Wellicht heb je dan de hele TD met onClick niet nodig? Of heb ik het nu echt niet goed begrepen?

[ Voor 30% gewijzigd door gvanh op 16-09-2004 09:40 ]

donderdag 16 september 2004 17:30

Acties:

Verwijderd

marty schreef op 16 september 2004 @ 08:00:
... knip...

dat cancelBubble werkte ook niet voor mij omdat je dan aan de id's van die elementen vast zit. En dat zijn er bij mij nogal wat en die hebben allemaal al een (variabele) naam.

Dat hele ID gebeuren zit hem dwars...