[JS] Overkoepelende onclick event negeren

[Verwijderd]

Ik ben wat osCommerce bagger-HTML-output aan het veranderen om de accessibility enigszins te verbeteren.

Ik heb de volgende HTML:

HTML:

<tr id="defaultSelected" class="dataTableRowSelected" onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="document.location.href='http://localhost/Assistant/Site/webshop/admin/banner_statistics.php?page=1&amp;bID=1'">
  <td class="dataTableContent"><a href="popup_image.php?banner=1" onclick="return popupImageWindow(this.href);">[img]"images/icon_popup.gif"[/img]</a>&nbsp;osCommerce</td>
  <td>[...]</td>
</tr>

edit:
JavaScript functie er ook maar even bij:

JavaScript:

<!--
function popupImageWindow(url) {
  window.open(url,'popupImageWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,left=150');

  return false;
}
//-->

Als ik nu op de <a> klik krijg ik door de functie popupImageWindow(this.href); een popup venster met het plaatje, alles naar wens...
Maar doordat er in de <tr> onclick event ook een actie staat wordt die onclick ook uitgevoerd wanneer ik op de link in de <td> klik.

Kan ik op de een of andere manier zorgen dat de onclick events in de <td> zorgen dat die van de <tr> niet worden uitgevoerd?

Alvast bedankt!

[ Voor 39% gewijzigd door Verwijderd op 10-07-2004 14:07 ]

[Verwijderd]

Eventjes zoeken op cancelBubble

Naja doe dan maar meteen de code .. is anders ook zo lullig

code:

function cancelEventBubbling(e){
    if (!e){e=event}
    if(document.all){
        event.cancelBubble=true;
    }else if(e){
        e.preventDefault();
        e.stopPropagation();
    };
    return false;
};

[ Voor 81% gewijzigd door Verwijderd op 09-07-2004 10:39 ]

[faabman]

je kunt dit imho beter oplossen met JS en wat DOM...

JavaScript:

window.onload = function(){
    var aTRs = document.getElementsByTagName('tr');
    
    for(var i=0; i<aTRs.length; i++){
        aTRs[i].onmouseout = rowOutEffect();
        aTRs[i].onmouseover = rowOverEffect();
        
        var aTDs = aTRs[i].getElementsByTagName('td');
        
        for(var j=0; j< aTDs.length; j++){
            if(aTDs[j].getElementsByTagName('a').length == 0){
                aTDs[j].onclick = function(){
                    document.location.href='url';
                }
            }
        }
    }
}

in een dergelijke functie kun je ook je class meegeven... wanneer je grote tabellen hebt scheelt dit je een hele hoop dataverkeer...

[Verwijderd]

faabman schreef op 09 juli 2004 @ 10:48:
je kunt dit imho beter oplossen met JS en wat DOM...

in een dergelijke functie kun je ook je class meegeven... wanneer je grote tabellen hebt scheelt dit je een hele hoop dataverkeer...

Die code ziet er goed uit. In de HTML worden ook parameters meegegeven aan de functies, hoe zou ik dat dan op kunnen lossen?

[Verwijderd]

De parameters die jij meegeeft zijn gewoon objecten. Diezelfde objecten kan je opvragen in het event object;

code:

<script type="text/javascript">
var o = document.getElementById("foo");

o.onmouseover = function (e) {
  if (e) {
    var oThisElem = e.target;
  } else {
    var oThisElem = window.event.srcElement;
  }
  alert(oThisElem.innerHTML); // alert => foo123
}

</script>
<div style="width: 400px; height: 400px; border: 1px solid #000;">foo123</div>

[Verwijderd]

Wel heel leuk wat je nu voorsteld, maar jij past nu alle tablerows aan in het hele document. Je kunt imo beter een bubble voorkomen dan al je elementen laten crepereren, het is nog sneller ook.