HTML-Element auf der Client-Seite deaktivieren (Javascript)

Question

Ich suche nach der einfachsten Möglichkeit, ein ganzes HTML-Element zu deaktivieren (typischerweise ein <div> ).

Mit "deaktivieren" meine ich eine Möglichkeit, den Benutzer daran zu hindern, auf eines der in dem Element enthaltenen Elemente zu klicken. Zum Beispiel, wenn Sie ein Formular in das deaktivierte Element haben, werden die Formular-Elemente nicht den Fokus zu fangen. Ich habe es mit einer Methode versucht, die das DOM durchläuft und jedes Element deaktiviert, das sie findet. Es funktioniert, aber es scheint zu komplex, und ich bin auf der Suche nach einer einfacheren Methode, etwas wie $("#mydiv").disable()

Ich möchte verhindern, dass der Benutzer andere Ereignisse wie onmouseover, etc. auslösen und sogar verhindern, dass der Benutzer auswählen und ändern Elemente mit der Tastatur. Vielleicht eine Art halbtransparentes Overlay, das das gesamte zu deaktivierende Element abdeckt, könnte den Trick machen.

Ist das möglich mit jQuery oder kennen Sie eine einfache Möglichkeit, es mit einfachen JS zu implementieren?

Answer 1

Sie können ein div erstellen, um dies dynamisch abzudecken - im Prototyp würde es etwa so aussehen:

var el = new Element("div", {style: "position: absolute; z-index: 2"});
Element.insert(document.body, el);
Element.clonePosition(el, $("mydiv"));

Und dann stylen Sie es so, wie Sie es deaktiviert zeigen möchten.

Wenn Sie jedoch eine gute Vorstellung davon haben, welche Elemente sich in dem Bereich befinden, scheint die Deaktivierung die bessere Option zu sein - dadurch wird der Tastaturzugriff auf die Elemente verhindert, d. h. das Aufrufen mit der Tabulatortaste und die Eingabe von Daten oder die Verwendung der Eingabetaste zur Aktivierung der Elemente.

Answer 2

Mit dem jQuery BlockUI Plugin können Sie synchrones Verhalten bei der Verwendung von AJAX simulieren, ohne den Browser zu sperren[1]. Wenn es aktiviert ist, verhindert es Benutzeraktivitäten auf der Seite (oder einem Teil der Seite), bis es deaktiviert wird. BlockUI fügt Elemente zum DOM hinzu, um sowohl das Aussehen als auch das Verhalten der Blockierung von Benutzerinteraktionen zu simulieren.

http://malsup.com/jquery/block/