Web-Frontend
js-Tutorial
Schnelle Lösung für den Konflikt zwischen onclick- und onblur_javascript-Fähigkeiten
Schnelle Lösung für den Konflikt zwischen onclick- und onblur_javascript-Fähigkeiten
Im Suchfeld auf der Sina-Homepage gibt es ein Dropdown-Feld mit Ajax. Wir müssen den Effekt erzielen, dass wir durch Klicken auf ein Element im Dropdown-Feld den Wert im Suchfeld auf dieses Element ändern und das Dropdown-Feld verschwinden Box verschwindet auch. Ungefähr wie im Bild gezeigt:
Wir verwenden onblur und onclick gleichzeitig, um das Dropdown-Feld auszublenden, es entsteht jedoch ein größerer Konflikt. Onblur ist zu leistungsfähig und es besteht keine Möglichkeit, die onclick-Methode zu implementieren des angeklickten Elements. Das ist der Konflikt zwischen onclick und onblur, den wir lösen wollen.
Entsprechend diesem Problem stellen wir hier zwei Lösungen vor:
1. Verwenden Sie setTimeout, um die Ausführungszeit von onblur zu verzögern, sodass onblur nach der Ausführung von onclick ausgeführt wird. (Die Zeiteinstellung von setTimeout sollte über 100 ms liegen, sonst funktioniert es immer noch nicht) Der Beispielcode lautet wie folgt:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{ margin: 0; padding: 0; list-style: none; }
form{
width:500px;
margin:0 auto;
position:relative;
zoom:1;
}
form:after{
clear:both;
content:"";
display:block;
}
.text{
float:left;
border:1px solid #cccccc;
padding-left:14px;
width:300px;
height:34px;
line-height:34px;
font-size:14px;
}
.button{
width:50px;
height:34px;
border:1px solid #cccccc;
line-height:34px;
font-size:14px;
color:#ffffff;
background:#ff8400;
}
ul{
position:absolute;
top:36px;
left:0;
width:300px;
border-right:1px solid #cccccc;
border-left:1px solid #cccccc;
background:green;
display:none;
}
li{
font-size:14px;
line-height:34px;
height:34px;
color:#000000;
border-bottom:1px solid #cccccc;
}
li:hover{
background:yellow;
color:red;
cursor:pointer;
}
</style>
<script>
window.onload=function(){
var oText=document.getElementById('text');
var oUl=document.getElementById('ul');
var aLi=oUl.getElementsByTagName('li');
var timer=null;
oText.onfocus=function(){
this.value='';
oUl.style.display='block';
for(var i=0;i<aLi.length;i++){
aLi[i].onclick=function(){
clearTimeout(timer);
oText.value=this.innerHTML;
oUl.style.display='none';
};
}
};
oText.onblur=function(){
timer=setTimeout(function(){
oUl.style.display='none';
if(!oText.value){
oText.value='请输入关键字';
}
},120);
};
};
</script>
</head>
<body>
<form>
<input type="text" value="请输入关键字" id="text" class="text"/>
<input type="button" value="搜索" class="button"/>
<ul id="ul">
<li>返回窗口是否已被关闭</li>
<li>返回窗口的文档显示区的高度</li>
<li>返回窗口的文档显示区的宽度。</li>
<li>设置或返回窗口的名称。</li>
<li>返回窗口的外部高度。</li>
</ul>
</form>
</body>
</html>2. Verwenden Sie document.onmousedown anstelle von onblur, um die Dropdown-Box-Funktion auszublenden
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{ margin: 0; padding: 0; list-style: none; }
form{
width:500px;
margin:0 auto;
position:relative;
zoom:1;
}
form:after{
clear:both;
content:"";
display:block;
}
.text{
float:left;
border:1px solid #cccccc;
padding-left:14px;
width:300px;
height:34px;
line-height:34px;
font-size:14px;
}
.button{
width:50px;
height:34px;
border:1px solid #cccccc;
line-height:34px;
font-size:14px;
color:#ffffff;
background:#ff8400;
}
ul{
position:absolute;
top:36px;
left:0;
width:300px;
border-right:1px solid #cccccc;
border-left:1px solid #cccccc;
background:green;
display:none;
}
li{
font-size:14px;
line-height:34px;
height:34px;
color:#000000;
border-bottom:1px solid #cccccc;
}
li:hover{
background:yellow;
color:red;
cursor:pointer;
}
</style>
<script>
window.onload=function(){
var oText=document.getElementById('text');
var oUl=document.getElementById('ul');
var aLi=oUl.getElementsByTagName('li');
var timer=null;
oText.onfocus=function(){
this.value='';
oUl.style.display='block';
for(var i=0;i<aLi.length;i++){
aLi[i].onclick=function(){
clearTimeout(timer);
oText.value=this.innerHTML;
oUl.style.display='none';
};
}
};
document.onmousedown=function(ev){
var oEvent=ev||event;
var target=oEvent.target||oEvent.srcElement;
if(target.parentNode!==oUl&&target!==oText){
oUl.style.display='none';
}
};
oText.onblur=function(){
if(!oText.value){
oText.value='请输入关键字';
}
};
};
</script>
</head>
<body>
<form>
<input type="text" value="请输入关键字" id="text" class="text"/>
<input type="button" value="搜索" class="button"/>
<ul id="ul">
<li>返回窗口是否已被关闭</li>
<li>返回窗口的文档显示区的高度</li>
<li>返回窗口的文档显示区的宽度。</li>
<li>设置或返回窗口的名称。</li>
<li>返回窗口的外部高度。</li>
</ul>
</form>
</body>
</html>Die schnelle Lösung des oben erwähnten Onclick- und Onblur-Konfliktproblems sind alle vom Herausgeber geteilten Inhalte. Ich hoffe, dass sie Ihnen eine Referenz geben können, und ich hoffe, dass Sie Script Home unterstützen.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Anleitung zum Deinstallieren der NumPy-Bibliothek, um Konflikte und Fehler zu vermeiden
Jan 26, 2024 am 10:22 AM
Die NumPy-Bibliothek ist eine der wichtigsten Bibliotheken in Python für wissenschaftliches Rechnen und Datenanalyse. Manchmal müssen wir jedoch die NumPy-Bibliothek deinstallieren, vielleicht weil wir die Version aktualisieren oder Konflikte mit anderen Bibliotheken lösen müssen. In diesem Artikel erfahren Sie, wie Sie die NumPy-Bibliothek korrekt deinstallieren, um mögliche Konflikte und Fehler zu vermeiden, und demonstrieren den Vorgang anhand spezifischer Codebeispiele. Bevor wir mit der Deinstallation der NumPy-Bibliothek beginnen, müssen wir sicherstellen, dass das Pip-Tool installiert ist, da Pip das Paketverwaltungstool für Python ist.
So lösen Sie einen Win11-Hintergrundbildschirmkonflikt
Jun 29, 2023 pm 01:35 PM
Wie kann ein Win11-Hintergrundbildschirmkonflikt gelöst werden? In letzter Zeit kam es bei einigen Benutzern zu einem schwarzen Bildschirm, nachdem sie eine Hintergrundsoftware auf ihren Computern installiert hatten. Dies ist höchstwahrscheinlich auf Konflikte zwischen Hintergrund und Bildschirm zurückzuführen. Werfen wir einen Blick auf die Lösung des Problems des Hintergrundbildschirmkonflikts im Windows 11-System. Lösung für das Problem des Hintergrundbildschirmkonflikts im Win11-System 1. Öffnen Sie das Fenster in der Einstellungsoption des Desktops. 2. Klicken Sie im Menü „Datei“ auf die Schaltfläche „Neue Aufgabe ausführen“. 3. Geben Sie explorer.exe in das Popup-Fenster für neue Aufgaben ein, klicken Sie zum Speichern auf OK und starten Sie den Ressourcenmanager neu.
So lösen Sie Hotkey-Konflikte
Feb 23, 2024 am 08:12 AM
So lösen Sie Hotkey-Konflikte Mit der Weiterentwicklung der Computertechnologie stoßen wir bei der Verwendung von Computern häufig auf das Problem von Hotkey-Konflikten. Unter Hotkeys versteht man die Realisierung einer bestimmten Operation oder Funktion durch Tastenkombinationen oder einzelne Funktionstasten auf der Tastatur. Allerdings haben unterschiedliche Software und Systeme unterschiedliche Definitionen von Hotkeys, was zum Problem von Hotkey-Konflikten führt. Wenn wir einen Hotkey drücken, kann es sein, dass unerwartete Funktionen ausgelöst werden oder gar nichts passiert. Um dieses Problem zu lösen, stelle ich Ihnen im Folgenden einige gängige Methoden zur Lösung von Hotkey-Konflikten vor. Die erste Lösung
So verwenden Sie onclick in HTML
Nov 13, 2023 am 10:07 AM
Indem Sie das onclick-Attribut auf eine JavaScript-Funktion oder ein JavaScript-Verhalten festlegen, können Sie eine Aktion ausführen, wenn der Benutzer auf ein Element klickt. Unabhängig davon, ob Sie das onclick-Attribut direkt im HTML-Tag verwenden oder das onclick-Attribut dynamisch über JavaScript hinzufügen und ändern, können Sie Klickereignisse verarbeiten.
Gründe und Lösungen dafür, dass die Win11-Eingabemethode nicht aktiviert werden kann
Jan 05, 2024 pm 12:22 PM
Nach dem Update auf das Win11-System stellen einige Benutzer fest, dass sich ihre chinesische Eingabemethode in x geändert hat und nicht verwendet werden kann. Tatsächlich liegt dies daran, dass wir uns in einer Position befinden, in der die Eingabemethode nicht verwendet werden kann. Wir müssen nur einen Ort betreten, an dem die Eingabemethode zur Lösung des Problems verwendet werden kann. Warum ist die Eingabemethode in Win11 deaktiviert: Antwort: Weil sie sich in einer Position befindet, in der keine Eingabe möglich ist. 1. Im Allgemeinen tritt diese Situation beim Betrachten des Desktops auf. 2. Weil wir die meiste Zeit keinen Text auf dem Desktop eingeben können. 3. Wir müssen also nur noch an die Stelle kommen, an der Text eingegeben werden kann, um das Problem zu lösen. 4. Verschiedene Eingabeorte wie QQ, WeChat, Dokumente, Notizblock und Webseiten können das Problem deaktivierter Eingabemethoden lösen.
Das MySQL-MVCC-Prinzip wurde enthüllt: Wie gehe ich mit Lese- und Schreibkonflikten bei gleichzeitigen Transaktionen um?
Sep 08, 2023 am 08:37 AM
Das MySQLMVCC-Prinzip wurde enthüllt: Wie gehe ich mit Lese- und Schreibkonflikten bei gleichzeitigen Transaktionen um? Einleitung: In Datenbanksystemen ist die gleichzeitige Ausführung von Transaktionen unerlässlich. Die gleichzeitige Ausführung bringt jedoch auch eine Reihe von Problemen mit sich, darunter Lese- und Schreibkonflikte. Wenn mehrere Transaktionen gleichzeitig dieselben Daten lesen und schreiben, kann es zu Inkonsistenzen kommen. Um dieses Problem zu lösen, hat MySQL den MVCC-Mechanismus (Multi-Version Concurrency Control) eingeführt. In diesem Artikel wird das Prinzip von MVCC erläutert und im Detail analysiert, wie MySQL mit Lese- und Schreibkonflikten gleichzeitiger Transaktionen umgeht.
Lösen Sie die Konfliktprobleme, die durch die gleichzeitige Verwendung von Zepto und jQuery verursacht werden können
Feb 24, 2024 pm 06:36 PM
Wie gehe ich mit potenziellen Konflikten bei der Verwendung von Zepto und jQuery richtig um? Bei der Frontend-Entwicklung kommt es häufig vor, dass wir Zepto und jQuery gleichzeitig verwenden müssen. Aufgrund einiger Unterschiede in der Implementierung zwischen den beiden kommt es jedoch manchmal zu potenziellen Konflikten. In diesem Artikel erfahren Sie, wie Sie Konflikte bei der Verwendung von Zepto und jQuery richtig handhaben, und stellen konkrete Codebeispiele bereit. 1. Einführung von Zepto und jQuery Zunächst müssen wir Zepto und jQue gleichzeitig in das Projekt einführen
Was tun, wenn in der neuesten Win10-Version 1909 ein Treiberkonflikt auftritt?
Jan 07, 2024 pm 12:45 PM
Für das aktualisierte System win101909 stellten einige Freunde fest, dass der 1909-Treiber nicht kompatibel ist und während der Verwendung Treiberkonflikte auftreten. Der Herausgeber ist der Meinung, dass Sie in diesem Fall versuchen können, den Treiber zu aktualisieren oder ihn auf eine ältere Version zurückzusetzen, um das Problem zu lösen. Werfen wir einen Blick darauf, wie es geht. So lösen Sie den Win101909-Treiberkonflikt. Methode 1. Suchen Sie das Symbol „Dieser PC“ auf dem Desktop und klicken Sie mit der rechten Maustaste darauf. Nach dem Klicken wird ein Menü angezeigt. Wählen Sie „Eigenschaften“. 2. Suchen Sie nach dem Öffnen des Fensters die Schaltfläche „Geräte-Manager“ auf der linken Seite des Fensters und klicken Sie darauf. 3. Suchen Sie unter „Anzeigeadapter“ nach dem Element „Grafikkartenmodell“. Klicken Sie mit der rechten Maustaste und wählen Sie „Treiber aktualisieren“ aus dem Menü. 4. Wählen Sie nach dem Klicken im neuen Popup-Fenster „Automatische Suche“ aus.
