onclick スキルと onblur_javascript スキルの間の競合に対する迅速な解決策
新浪ホームページの検索ボックスにajaxを使用したドロップダウンボックスがあります。ドロップダウン ボックス内の項目をクリックすると、検索ボックスの値がこの項目に変更され、ドロップダウン ボックスが消えるという効果を実現する必要がありますが、同時に他の場所をクリックするとドロップダウンが表示されます。ボックスも消えます。およそ写真に示すとおり:
ドロップダウン ボックスを非表示にするために onblur と onclick を同時に使用しますが、これら 2 つの関数が競合するため、検索ボックスがコンテンツを取得できないという大きな問題が発生します。クリックされた項目の。これは、解決したい onclick と onblur の間の競合です。
この問題に対応して、ここでは 2 つの解決策を紹介します。
1. setTimeout を使用して onblur 時間の実行を遅らせ、onclick が実行された後に onblur が実行されるようにします。 (setTimeout の時間設定は 100ms 以上である必要があります。そうでない場合でも機能しません) サンプルコードは次のとおりです:
<!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. onblur の代わりに document.onmousedown を使用して、ドロップダウン ボックス機能を非表示にします
<!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>上記の onclick と onblur の競合問題に対する簡単な解決策は、エディターによって共有されたすべての内容ですので、参考にしていただければ幸いです。また、Script Home をサポートしていただければ幸いです。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7380
15
1628
14
1357
52
1267
25
1216
29
競合やエラーを回避するために NumPy ライブラリをアンインストールするためのガイド
Jan 26, 2024 am 10:22 AM
NumPy ライブラリは、科学計算とデータ分析のための Python の重要なライブラリの 1 つです。ただし、場合によっては、バージョンをアップグレードしたり、他のライブラリとの競合を解決したりする必要があるため、NumPy ライブラリをアンインストールする必要がある場合があります。この記事では、競合やエラーの可能性を回避するために NumPy ライブラリを正しくアンインストールする方法を読者に紹介し、特定のコード例を通じて操作プロセスを示します。 pip は Python のパッケージ管理ツールであるため、NumPy ライブラリのアンインストールを開始する前に、pip ツールがインストールされていることを確認する必要があります。
Win11の壁紙画面の競合を解決する方法
Jun 29, 2023 pm 01:35 PM
Win11の壁紙画面の競合を解決するにはどうすればよいですか?最近、一部のユーザーがコンピュータに壁紙ソフトウェアをインストールした後に黒い画面が表示されることがありますが、これはおそらく壁紙と画面の競合が原因であると考えられます。 Windows 11システムの壁紙画面の競合の問題の解決策を見てみましょう。 win11システムで壁紙画面が競合する問題の解決策 1. デスクトップの設定オプションでウィンドウを開きます。 2. [ファイル] メニューの [新しいタスクの実行] ボタンをクリックします。 3. 新しいタスクのポップアップ ボックスに「explorer.exe」と入力し、[OK] をクリックして保存し、リソース マネージャーを再起動します。
ホットキーの競合を解決する方法
Feb 23, 2024 am 08:12 AM
ホットキーの競合を解決する方法 コンピューター技術の進歩に伴い、コンピューターの使用時にホットキーの競合の問題が頻繁に発生します。ホット キーとは、キーボード上のキーの組み合わせまたは個々のファンクション キーによって特定の操作または機能を実現することを指します。ただし、ソフトウェアやシステムによってホットキーの定義が異なるため、ホットキーの競合の問題が発生します。ホットキーを押すと、予期しない機能がトリガーされる場合や、まったく何も起こらない場合があります。この問題を解決するために、以下にいくつかの一般的なホットキー競合解決方法を紹介します。最初の解決策
HTMLでのonclickの使い方
Nov 13, 2023 am 10:07 AM
onclick 属性を JavaScript 関数または動作に設定すると、ユーザーが要素をクリックしたときにアクションを実行できます。 onclick 属性を HTML タグ内で直接使用する場合でも、JavaScript を使用して onclick 属性を動的に追加および変更する場合でも、クリック イベントを処理できます。
win11の入力方法を有効にできない理由と解決策
Jan 05, 2024 pm 12:22 PM
win11システムにアップデートした後、中国語の入力方法がxに変更され、使用できないことに気づく人もいます。実はこれはインプットメソッドが使えない状況にあるためで、インプットメソッドが使える場所に入るだけで問題は解決します。 win11でインプットメソッドが無効になっている理由: 回答: 入力できない位置にあるためです。 1. 通常、この状況はデスクトップを表示しているときに発生します。 2. ほとんどの場合、デスクトップではテキストを入力できないためです。 3. したがって、問題を解決するには、テキストを入力できる場所に到達するだけで済みます。 4. QQ、WeChat、ドキュメント、メモ帳、Web ページなどのさまざまな入力場所により、無効な入力方法の問題を解決できます。
MySQL MVCC 原則が明らかに: 同時トランザクションにおける読み取りと書き込みの競合にどう対処するか?
Sep 08, 2023 am 08:37 AM
MySQLMVCC の原則が明らかに: 同時トランザクションにおける読み取りと書き込みの競合にどのように対処するか?はじめに: データベース システムでは、トランザクションの同時実行が不可欠です。ただし、同時実行には一連の問題も発生します。その 1 つは読み取りと書き込みの競合です。複数のトランザクションが同じデータを同時に読み書きすると、不整合が発生する可能性があります。この問題を解決するために、MySQL はマルチバージョン同時実行制御 (MVCC) メカニズムを導入しました。この記事では、MVCC の原理を明らかにし、MySQL が同時トランザクションの読み取りと書き込みの競合をどのように処理するかを詳細に分析します。
Zepto と jQuery を同時に使用することによって発生する可能性のある競合の問題を解決する
Feb 24, 2024 pm 06:36 PM
Zepto と jQuery を使用するときに潜在的な競合を正しく処理するにはどうすればよいですか?フロントエンド開発では、Zepto と jQuery を同時に使用する必要がある状況がよくありますが、両者の実装の違いにより、潜在的な競合が発生することがあります。この記事では、Zepto と jQuery を使用するときに競合を正しく処理する方法を説明し、具体的なコード例を示します。 1. Zepto と jQuery の導入 まず、Zepto と jQue を同時にプロジェクトに導入する必要があります
win10 最新バージョン 1909 でドライバーの競合が発生した場合の対処方法
Jan 07, 2024 pm 12:45 PM
更新された win101909 システムについては、1909 ドライバーに互換性がなく、使用中にドライバーの競合が発生することを友人が発見しました。編集者は、この場合、ドライバーを更新するか、古いバージョンのドライバーに復元することで問題を解決できると考えています。その方法を見てみましょう。 win101909 ドライバーの競合を解決する方法 方法 1. デスクトップで「この PC」アイコンを見つけて右クリックします。クリックするとメニューが表示されるので、「プロパティ」を選択します。 2. ウィンドウを開いたら、ウィンドウの左側にある「デバイス マネージャー」ボタンを見つけてクリックします。 3. 「ディスプレイ アダプター」でグラフィックス カード モデル項目を見つけます。右クリックして、メニューから「ドライバーの更新」を選択します。 4. クリック後、新しいポップアップウィンドウで「自動検索」を選択します。
