Ein Div mit JavaScript anklickbar machen

1. Verwenden des onclick-Ereignishandlers, um ein Div anklickbar zu machen
2. Hinzufügen eines bedingten Klicks zu einem Div
3. Gut zu habende Funktion in einem klickbaren Div
4. Erreichen der Ankerelementfunktionalität mit einem anklickbaren Div

Das Tag <a> (oder das Ankerelement) in HTML wird häufig für Navigationssteuerelemente verwendet. Es ist ein anklickbares Tag, das ohne JavaScript-Code im Hintergrund funktioniert. Es ist kein Blockelement. Können wir ein <div>-Tag für das Routing zu einem Pfad genauso wie das Anker-Tag verwenden? Die Antwort ist definitiv ja, aber Sie müssen Javascript-Code dafür schreiben. Wir können einen click handler auf dem div-Element verwenden, um es anklickbar zu machen.

Verwenden des onclick-Ereignishandlers, um ein Div anklickbar zu machen

Das Ankerelement ist ein angezeigtes Inline. Und diese Funktion funktioniert möglicherweise nicht immer zu unseren Gunsten beim Entwerfen der grafischen Benutzeroberfläche. div s sind beim Entwerfen von GUIs einfach zu verwenden, da sie eigenständige Blockelemente sind. Ein div ist ein Inhaltsteilungselement und ist standardmäßig nicht anklickbar. Möglicherweise müssen wir den Event-Handler onclick verwenden, um die vom Element ausgegebenen Ereignisse zu verarbeiten, wenn ein Benutzer darauf klickt. Der Event-Handler onclick akzeptiert eine Funktion oder einen JavaScript-Ausdruck vor der Funktion. Wenn ein Benutzer auf das div klickt, führt Javascript die zugehörigen Funktionen oder die Ausdrücke zur Laufzeit aus. Es gibt mehrere Möglichkeiten, den Event-Handler onclick zu einem div-Element hinzuzufügen.

Kombinieren von HTML- und JavaScript-Code, um ein Div anklickbar zu machen

Der am weitesten verbreitete Ansatz in Javascript und verschiedenen Frameworks von Javascript besteht darin, einen Funktionsaufruf mit dem Event-Handler onclick im HTML-Code zu verknüpfen. Dann schreiben wir die damit verbundene Funktionsdefinition in den Javascript-Code. Sobald ein Benutzer auf das div klickt, führt der onclick-Ereignishandler die Funktion aus, die als Argument an onclick des div-Elements übergeben wurde. Siehe den folgenden Code.

<div id="title-div" onclick="sayHello()"></div>

function sayHello() {
  console.log('Hello there !!');
}

Sobald der Benutzer auf das title-div klickt, wird die zugehörige Funktion sayHello() ausgeführt. Und wir werden Hello there !! haben. in der Webkonsole angemeldet. Dieser Ansatz ist weit verbreitet und erleichtert das Debuggen im Vergleich zum reinen Javascript-Ansatz. Der HTML-Code zeigt explizit die Bindung an.

Verwenden von reinem JavaScript, um ein div anklickbar zu machen

Ein anderer Ansatz ist rein Javascript basiert. Zuerst finden wir das gewünschte HTML-Element mit einer der Methoden wie document.getElementById(), document.getElementsByClassName(), document.querySelectorAll() usw. Die am häufigsten verwendete Methode zum Auffinden des HTML-Elements ist die document.getElementById(), da es das HTML-Element anhand der id, die wir ihm im HTML zuweisen, eindeutig identifiziert. Sobald wir das Element, das div-Element gefunden haben, hängen wir den onclick-Event-Handler an und verknüpfen die auszuführende Funktion bei click des div. Der folgende Code erläutert den Ansatz.

<div id="title-div">Click here</div>

window.onload =
    function() {
  var el = document.getElementById('title-div');
  el.onclick = sayHello;
}

function sayHello() {
  console.log('Hello');
}

Im obigen Code binden wir den Event-Handler onclick rein in JavaScript. Von einem onclick-Mapping im HTML keine Spur. Der HTML-Code ist mit einem div-Element und einer dazugehörigen id einfach gehalten. Beachten Sie auch, dass wir dem Ereignishandler onclick das Funktionsobjekt sayHello zuweisen. Wenn wir sayHello() (mit Klammern) anstelle von sayHello verlinken, führt dies dazu, dass JavaScript die Funktion beim Laden des window selbst ausführt. Und nichts passiert, wenn ein Benutzer auf das Element div klickt.

Hinzufügen eines bedingten Klicks zu einem Div

Wir können das Click-Ereignis bedingt auslösen. Mit dem HTML- und JavaScript-Ansatz können wir einen Ausdruck hinzufügen, der mit dem && oder dem || gekoppelt ist. unterschreiben je nach Anforderung. JavaScript führt das Ereignis click basierend auf der Auswertung des booleschen Ausdrucks aus. Wenn es als wahr ausgewertet wird, führt JavaScript die zugehörige Funktion aus.

<div onclick="isEvenClick() && sayHello()">Click Here !!!</div>

function sayHello() {
  console.log('Hello');
}

function isEvenClick() {
  clickCounter++;
  return (clickCounter % 2 === 0)
}

Der obige Code protokolliert Hello nur bei einer geraden Anzahl von Klicks. Wir können den gleichen Code auch mit expression anstelle der Funktion isEvenClick() schreiben, wie im folgenden Code ausgeführt.

<div onclick="(++clickCounter % 2 === 0) && sayHello()" id="title-div">Click here</div>

Der Ausdruck wird zur Laufzeit auf den Wert von clickCounter ausgewertet. Ist der clickCounter gerade, wird der Ausdruck (++clickCounter % 2 === 0) als true ausgewertet und die Funktion sayHello() ausgeführt.

Gut zu habende Funktion in einem klickbaren Div

Sobald wir einen click-Listener zu einem div hinzufügen, ist es immer noch ein div. Der Benutzer wird nicht verstehen, ob mit diesem HTML-Element eine Benutzerinteraktion verbunden ist. Zu diesem Zweck können wir mithilfe der CSS-Stile Funktionen hinzufügen. Eine solche Sache ist, den Cursor zu einem Handsymbol zu machen. Wir können dies tun, indem wir cursor: pointer verwenden. Es ist eine gute UI/UX-Praxis, den Endbenutzer darauf hinzuweisen, dass dieses HTML-Element umsetzbar ist. Wir können es auf folgende Weise tun.

<div onclick="sayHello()" style="cursor: pointer;">Click Here !!!</div>

Dasselbe können wir mit reinem JavaScript erreichen, indem wir dem Element zur Laufzeit Stile hinzufügen. Wir wählen zuerst das Element mit document.getElementById() aus und fügen dann mit el.style.cursor den Cursor-Stil hinzu und weisen ihm den String-Wert pointer zu. Der folgende Code erklärt es.

<div onclick="sayHello()">Click Here !!!</div>

window.onload =
    function() {
  var el = document.getElementById('title-div');
  el.style.cursor = 'pointer';
  el.onclick = sayHello;
}

function sayHello() {
  console.log('Hello');
}

Erreichen der Ankerelementfunktionalität mit einem anklickbaren Div

Wir können ein div-Element verwenden, um ein Anker-Element nachzuahmen. Das Tag <a> hat ein Attribut namens href, das einen Hyperlink erstellt. Wir können das gleiche Verhalten mit dem onclick eines div nachahmen. Wir verlinken eine Funktion zur Erfassung des click-Ereignisses im HTML-Code. Im Javascript-Code verwenden wir das Attribut window.location.href, um eine URL mit dem div zu verknüpfen. Beobachten Sie die Funktionsweise im folgenden Code.

<div onclick="navToGoogle()" style="cursor: pointer;">Take me to Google</div>

function navToGoogle() {
  window.location.href = 'https://www.google.com';
}