✔ Fenster in Vordergrund holen zerstört Click-Events

multimolti

multimolti

Erfahrenes Mitglied
Hallo!

Ich habe für ein Projekt eine einfache Methode gebastelt, verschiebbare Fenster zu erstellen (mithilfe von Script.aculo.us). Klappt auch ganz gut, nur wenn man mehrere Fenster hat, ist immer das zuletzt erstellte im Vordergrund.
Gegen dieses Problem habe ich das hier eingesetzt:

HTML: 
# Fenster-DIV:
<div id="popupbox05" class="popupbox" ondblclick="closewindow(this)" 
          onmousedown="putInFront(this);">Fensterinhalt</div>
Javascript: 
# putInFront-Funktion:
function putInFront(windowelement)
{	
	document.removeChild(windowelement);
	$$("body")[0].appendChild(windowelement);	
}
Das funktioniert eigentlich, nur werden dadurch (glaube ich) alle Events für Elemente innerhalb des DIVs abgefangen, z.B. ein DropDown-Menü oder eine Scrollleiste reagieren einfach gar nicht mehr auf Klicks.

Weiß jemand entweder, wie ich die Events "durchreichen" kann, damit sie bei den Elementen im Fenster ankommen, oder wie ich die Fenster auf eine bessere Art in den Vordergrund holen kann?

Vielen Dank für eure Hilfe!
 
Zuletzt bearbeitet von einem Moderator:
Hi,

du könntest die mousedown-Überwachung für das jeweils oberste Element unterbinden. So wird das Klick-Ereignis wieder weitergereicht.

Wird das oberste Element durch ein anderes abgelöst, wird der alte Zustand des bisher obersten wieder hergestellt.

Im onload-Event des Dokuments wird das derzeit oberste Element gespeichert und sein onmousedown-Event deaktiviert.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
.popupbox{
  position: absolute;
  width: 400px;
  height: 400px;
  border: 1px solid #000;
  background: #fff;
}
#popupbox05{
  top: 30px;
  left: 30px;
}
#popupbox06{
  top: 60px;
  left: 100px;
}
 //-->
</style>
<script src="prototype.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
var objSave = null;

function closewindow(objElem){
  alert(objElem.id);
}

function putInFront(windowelement){
  windowelement.parentNode.removeChild(windowelement);
  $$("body")[0].appendChild(windowelement);

  // Event-Überwachung beenden
  windowelement.onmousedown = null;

  // Falls bereits eine Überwachung beendet wurde
  if(objSave != null){
    // Bisheriges oberstes Element als nicht-oberstes kennzeichnen
    objSave.isTop = false;
    // Event wieder überwachen
    objSave.onmousedown = function(){
      putInFront(this);
    }
  }

  // Neues oberstes Element markieren
  windowelement.isTop = true;
  // Element in globaler Variable speichern
  objSave = windowelement;
}

Event.observe(window, 'load', function(){
  // Bisheriges oberstes Element speichern
  objSave = $$('.popupbox')[$$('.popupbox').length-1];
  // mousedown-Event des obersten Elements deaktivieren
  $$('.popupbox')[$$('.popupbox').length-1].onmousedown = null;
});
 //-->
</script>
</head>
<body>
<div id="popupbox05" class="popupbox" ondblclick="closewindow(this)" onmousedown="putInFront(this);">
  Fensterinhalt
  <button onclick="alert('Jetzt bin ich dran!');">Klick!</button>
</div>
<div id="popupbox06" class="popupbox" ondblclick="closewindow(this)" onmousedown="putInFront(this);">Fensterinhalt</div>
</body>
</html>

Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Soo, noch mal danke für den Code, funktioniert leider nicht so ganz bei mir...

Ich habe folgende Probleme:
  1. Ich verstehe das mit Event.observe nicht so richtig. Was ist in der window-Variable? Die wurde nirgends deklariert, nie etwas zugewiesen, wie kann das dann funktionieren?
  2. Der Code mit dem Event.observe wird aufgerufen, sobald die Seite geladen wird. Meine Fenster werden aber erst auf "Knopfdruck" erstellt, d.h. beim Laden der Seite gibt es noch gar keine. Daher bekomme ich immer den Fehler, dass Element -1 des $$(".popupbox")-Arrays nicht existiert.
 
Hi,

das window-Objekt ist ein JS-internes Objekt - sieht SelfHTML. Hierüber wird nur der onload-Event des Dokuments überwacht, um die vorhandenen Fenster derart zu manipulieren, dass das oberste keinen click-Event mehr besitzt.

Da du die Fenster dynamisch erstellst, ist dieser Teil für dich sowieso hinfällig. Du könntest stattdessen in einer eigenen Funktion die Fenster erstellen, am Ende der Routine ins Dokument einhängen und anschliessend noch die Funktion putInFront aufrufen.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
.popupbox{
  position: absolute;
  width: 400px;
  height: 400px;
  border: 1px solid #000;
  background: #fff;
}
#popupbox05{
  top: 30px;
  left: 30px;
}
#popupbox06{
  top: 60px;
  left: 100px;
}
 //-->
</style>
<script src="prototype.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
var objSave = null;

function closewindow(objElem){
  alert(objElem.id);
}

function putInFront(windowelement){
  windowelement.parentNode.removeChild(windowelement);
  $$("body")[0].appendChild(windowelement);

  // Event-Überwachung beenden
  windowelement.onmousedown = null;

  // Falls bereits eine Überwachung beendet wurde
  if(objSave != null){
    // Bisheriges oberstes Element als nicht-oberstes kennzeichnen
    objSave.isTop = false;
    // Event wieder überwachen
    objSave.onmousedown = function(){
      putInFront(this);
    }
  }

  // Neues oberstes Element markieren
  windowelement.isTop = true;
  // Element in globaler Variable speichern
  objSave = windowelement;
}

function createWin(strID){
  // Falls das Fenster noch nicht existiert
  if(!document.getElementById(strID)){
    // Fensterobjekt erstellen und mit ID und Klasse auszeichnen
    var objWin = document.createElement("div");
    objWin.id = strID;
    objWin.className = "popupbox";

    // Objekt mit den erforderlichen Events ausstatten
    objWin.ondblclick = function(){
      closewindow(this);
    }
    objWin.onmousedown = function(){
      putInFront(this);
    }

    // Inhalt
    objWin.innerHTML = "Fensterinhalt: " + strID;
    // In Dokument einhängen
    $$("body")[0].appendChild(objWin);
    // Funktion aufrufen, um es in den Vordergrund zu bringen
    putInFront(objWin);
  }
}
 //-->
</script>
</head>
<body>
<p>
  <button onclick="createWin('popupbox05');">create popupbox05</button>
  <button onclick="createWin('popupbox06');">create popupbox06</button>
</p>
</body>
</html>

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück