Linuchs: ich glaub' jetzt hab ich's

Beitrag lesen

Hallo Orlok,

ich denke, deine Erklärungen sind so umfangreich, dass der wahre Kern nicht immer gleich sichtbar wird, wie bei versteckten Ostereiern. Ich mache jetzt dieses und es scheint das zu sein, was ich gesucht habe:

/* *************************************************************************
 * 
 * ein Klick-Event fuer die ganze Seite. Wenn Klick, dann enthaelt
 *
 * target: Zeiger auf das Objekt, auf das geklickt wurde, z.B. <input ...
 * currentTarget: Zeiger auf Objekt des Klick-Events, hier also <body>
 * 
 * ************************************************************************* */
window.addEventListener('DOMContentLoaded', function ( ) {
  document.getElementsByTagName( "body" )[0].addEventListener('click', function (event) {
    var obj = event.target;
//  alert( "target=[" +obj.tagName +"] target.parent=[" +obj.parentElement.tagName +"]" );
    if ( obj.tagName == "TD" ) obj = obj.parentElement; // wenn auf eine freie Stelle im TD geklickt, dann nimm TR
    if ( obj.tagName == 'TR' || obj.classList.contains( "position" )) {
      switchMarkierung( obj );
    }
  });
});

Der Code ist so überraschend schlank, ich stelle meine alte Version noch mal dagegen, die aber nicht richtig funktionierte:

window.addEventListener('DOMContentLoaded', function ( ) {
  // tbody tr Tabellenzeilen per Klick einfaerben ...
  var obj_tbody = document.getElementsByTagName( "tbody" );
  for ( var i=0; i<obj_tbody.length; i++ ) {
    var obj_tr = obj_tbody[i].getElementsByTagName( "tr" );
    for ( var j=0; j<obj_tr.length; j++ ) {
      obj_tr[j].addEventListener('click',  function () { switchMarkierung(this); });
    }
  }
  // ... auch Positionen per Klick einfaerben (muessen nicht tr sein )
  obj = document.getElementsByClassName( "position" );
  for ( i=0; i<obj.length; i++ ) {
    obj[i].addEventListener('click',  function () {
      switchMarkierung(this);
    });
  }
  // Klick auf <a ... nicht wieterreichen
  obj = document.getElementsByTagName( "a" );
  for ( i=0; i<obj.length; i++ ) {
    obj[i].addEventListener('click', function (event) {
      event.stopPropagation();
    });
  }
  // Klick auf <input ... nicht wieterreichen
  obj = document.getElementsByTagName( "input" );
  for ( i=0; i<obj.length; i++ ) {
    obj[i].addEventListener('click', function (event) {
      event.stopPropagation();
    });
  }
});

Danke dir für deine Mühe, hat bei mir endlich den AHA Effekt ausgelöst.

Linuchs