hujung hadapan webtutorial jsPenyelesaian pantas kepada konflik antara kemahiran onclick dan onblur_javascript
Terdapat kotak lungsur menggunakan ajax dalam kotak carian di halaman utama Sina. Kita perlu mencapai kesan mengklik item dalam kotak drop-down supaya nilai dalam kotak carian berubah kepada item ini dan kotak drop-down hilang Tetapi pada masa yang sama, apabila mengklik di tempat lain, drop-down kotak juga hilang. Kira-kira seperti yang ditunjukkan dalam gambar:
Kami menggunakan onblur dan onclick pada masa yang sama untuk menyembunyikan kotak drop-down, tetapi masalah yang lebih besar timbul dalam konflik Onblur dan tiada peluang untuk melaksanakan kaedah onclick daripada item yang diklik. Ini ialah konflik antara onclick dan onblur yang ingin kami selesaikan.
Sejajar dengan masalah ini, di sini kami memperkenalkan dua penyelesaian:
1. Gunakan setTimeout untuk menangguhkan pelaksanaan masa onblur, supaya onblur dilaksanakan selepas onclick dilaksanakan. (Tetapan masa setTimeout hendaklah melebihi 100ms, jika tidak, ia masih tidak akan berfungsi) Kod sampel adalah seperti berikut:
<!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. Gunakan document.onmousedown dan bukannya onblur untuk menyembunyikan fungsi kotak lungsur
<!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>
Penyelesaian pantas untuk masalah konflik onclick dan onblur yang dinyatakan di atas ialah semua kandungan yang dikongsi oleh editor saya harap ia boleh memberi rujukan kepada anda, dan saya harap anda akan menyokong Script Home.
避免冲突与错误的NumPy库卸载指南Jan 26, 2024 am 10:22 AMNumPy库是Python中用于科学计算和数据分析的重要库之一。然而，有时候我们可能需要卸载NumPy库，可能是因为需要升级版本或者解决与其他库的冲突问题。本文将向读者介绍如何正确地卸载NumPy库，以避免可能出现的冲突和错误，并通过具体的代码示例来演示操作过程。在开始卸载NumPy库之前，我们需要确保已经安装了pip工具，因为pip是Python的包管理工
如何解决Win11壁纸屏幕冲突Jun 29, 2023 pm 01:35 PM如何解决Win11壁纸屏幕冲突？近期有用户在给电脑安装了一些壁纸软件之后会出现黑屏的情况，这很有可能是壁纸屏幕冲突引起的，那么对于这一情况应该如何解决呢？下面我们来看看win11系统壁纸屏幕冲突问题处理方案吧。win11系统壁纸屏幕冲突问题处理方案 1、在桌面的设置选项中打开窗口。 2、鼠标点击文件菜单下的运行新任务按钮。 3、在新建任务弹框中输入explorer.exe字眼，点击确定保存并重启资源管理器即可。
热键冲突怎么解决Feb 23, 2024 am 08:12 AM热键冲突怎么解决随着计算机技术的进步，我们在使用电脑时经常会遇到热键冲突的问题。热键是指通过键盘上的组合键或单独的功能键来实现某一操作或功能。然而，由于不同软件和系统对热键的定义各不相同，就导致了热键冲突的问题。当我们按下某个热键时，可能会触发出意料之外的功能，或者根本没有任何反应。为了解决这个问题，下面我将给大家介绍几种常见的热键冲突解决方法。第一种解决方
HTML中onclick怎么用Nov 13, 2023 am 10:07 AM通过将onclick属性设置为一个JavaScript函数或行为，可以在用户点击某个元素时执行相应的操作。无论是直接在HTML标签中使用onclick属性，还是通过JavaScript动态地添加和修改onclick属性，都可以实现点击事件的处理。
win11输入法无法启用原因及解决方案Jan 05, 2024 pm 12:22 PM有的用户在更新到win11系统后，发现自己的中文输入法变成了x，无法使用。其实这是因为我们处于一个无法使用输入法的位置，只需要进入可以使用输入法的地方就可以解决了。win11输入法已禁用是为什么：答：因为在无法输入的位置。1、一般这种情况都是出现在查看桌面的时候。2、因为大部分时候，我们在桌面上是无法输入文字的。3、所以我们只需要来到可以输入文字的地方就可以解决了。4、例如QQ、微信、文档、记事本、网页等各种能输入的位置都能解决已禁用输入法的问题。
MySQL MVCC 原理揭秘：如何处理并发事务的读写冲突？Sep 08, 2023 am 08:37 AMMySQLMVCC原理揭秘：如何处理并发事务的读写冲突？引言：在数据库系统中，事务的并发执行是必不可少的。然而，并发执行也带来了一系列的问题，其中之一就是读写冲突。当多个事务同时读写同一个数据时，就可能出现不一致的情况。为了解决这个问题，MySQL引入了多版本并发控制（MVCC）机制。本文将揭秘MVCC的原理，详细解析MySQL是如何处理并发事务的读写冲
解决Zepto和jQuery同时使用可能导致的冲突问题Feb 24, 2024 pm 06:36 PM如何正确处理Zepto和jQuery共用时的潜在冲突问题？在前端开发中，我们经常会遇到需要同时使用Zepto和jQuery的情况，但是由于两者在实现上存在一些差异，有时会引发潜在的冲突问题。本文将指导你如何正确处理Zepto和jQuery共用时的冲突问题，并提供具体的代码示例。一、引入Zepto和jQuery首先，我们需要在项目中同时引入Zepto和jQue
win10最新版本1909驱动冲突怎么办Jan 07, 2024 pm 12:45 PM对于更新后的win101909系统，有部分小伙伴使用过程中就发现了1909驱动不兼容，驱动冲突的情况。小编觉得这种情况可以尝试更新驱动，或者是恢复到老版本的驱动就可以解决问题。下面一起来看下具体怎么做吧。win101909驱动冲突怎么办方法一1、找到桌面上的“此电脑”图标，右键点击。点击之后会弹出菜单，选择“属性”2、打开窗口之后，找到并点击窗口左侧的“设备管理器”按钮3、找到“显示适配器”下的显卡型号一项，右键点击，并在弹出的菜单中选择“更新驱动程序”4.点击之后，在新弹出的窗口中选择“自动搜
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
ZendStudio 13.5.1 Mac
Persekitaran pembangunan bersepadu PHP yang berkuasa
MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod
