Penyelesaian pantas kepada konflik antara kemahiran onclick dan onblur

Rumah

hujung hadapan web

tutorial js

Penyelesaian pantas kepada konflik antara kemahiran onclick dan onblur_javascript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:03 PM

onclick konflik

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:

Penyelesaian pantas kepada konflik antara kemahiran onclick dan onblur_javascript

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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.

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

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.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

4 minggu yang lalu By DDD

R.E.P.O. Simpan Fail Lokasi: Di manakah & bagaimana untuk melindunginya?

4 minggu yang lalu By DDD

Muzium Dua Point: Semua Pameran dan Di Mana Mencari Mereka

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7380

Tutorial Java

1628

Tutorial CakePHP

1357

Tutorial Laravel

1267

Tutorial PHP

1216

Tunjukkan Lagi

Related knowledge

Panduan untuk menyahpasang perpustakaan NumPy untuk mengelakkan konflik dan ralat Jan 26, 2024 am 10:22 AM

Pustaka NumPy ialah salah satu perpustakaan penting dalam Python untuk pengkomputeran saintifik dan analisis data. Walau bagaimanapun, kadangkala kami mungkin perlu menyahpasang pustaka NumPy, mungkin kerana kami perlu menaik taraf versi atau menyelesaikan konflik dengan perpustakaan lain. Artikel ini akan memperkenalkan pembaca kepada cara menyahpasang pustaka NumPy dengan betul untuk mengelakkan kemungkinan konflik dan ralat, dan menunjukkan proses operasi melalui contoh kod tertentu. Sebelum kita mula menyahpasang perpustakaan NumPy, kita perlu memastikan bahawa alat pip dipasang, kerana pip ialah alat pengurusan pakej untuk Python.

Bagaimana untuk menyelesaikan konflik skrin kertas dinding Win11 Jun 29, 2023 pm 01:35 PM

Bagaimana untuk menyelesaikan konflik skrin kertas dinding Win11? Baru-baru ini, sesetengah pengguna telah mengalami skrin hitam selepas memasang beberapa perisian kertas dinding pada komputer mereka Ini berkemungkinan besar disebabkan oleh konflik skrin kertas dinding Jadi bagaimanakah keadaan ini harus diselesaikan? Mari kita lihat penyelesaian kepada masalah konflik skrin kertas dinding dalam sistem Windows 11. Penyelesaian kepada masalah konflik skrin kertas dinding dalam sistem win11 1. Buka tetingkap dalam pilihan tetapan desktop. 2. Klik butang Jalankan Tugas Baharu di bawah menu Fail. 3. Masukkan explorer.exe dalam kotak pop timbul tugasan baharu, klik OK untuk menyimpan dan mulakan semula pengurus sumber.

Bagaimana untuk menyelesaikan konflik hotkey Feb 23, 2024 am 08:12 AM

Cara Menyelesaikan Konflik Hotkey Dengan kemajuan teknologi komputer, kita sering menghadapi masalah konflik hotkey semasa menggunakan komputer. Kekunci panas merujuk kepada merealisasikan operasi atau fungsi tertentu melalui kombinasi kekunci atau kekunci fungsi individu pada papan kekunci. Walau bagaimanapun, perisian dan sistem yang berbeza mempunyai takrifan kekunci pintas yang berbeza, yang membawa kepada masalah konflik kekunci pintas. Apabila kami menekan kekunci pintas, ia mungkin mencetuskan kefungsian yang tidak dijangka, atau tiada apa-apa boleh berlaku sama sekali. Untuk menyelesaikan masalah ini, saya akan memperkenalkan kepada anda beberapa kaedah penyelesaian konflik hotkey biasa di bawah. Penyelesaian pertama

Cara menggunakan onclick dalam HTML Nov 13, 2023 am 10:07 AM

Dengan menetapkan atribut onclick kepada fungsi atau tingkah laku JavaScript, anda boleh melakukan tindakan apabila pengguna mengklik pada elemen. Sama ada anda menggunakan atribut onclick secara terus dalam teg HTML atau menambah dan mengubah suai atribut onclick secara dinamik melalui JavaScript, anda boleh mengendalikan acara klik.

Sebab dan penyelesaian tidak dapat mendayakan kaedah input win11 Jan 05, 2024 pm 12:22 PM

Selepas mengemas kini kepada sistem win11, sesetengah pengguna mendapati kaedah input bahasa Cina mereka telah berubah kepada x dan tidak boleh digunakan. Sebenarnya, ini kerana kita berada dalam kedudukan di mana kaedah input tidak boleh digunakan Kita hanya perlu memasukkan tempat di mana kaedah input boleh digunakan untuk menyelesaikan masalah. Mengapa kaedah input dilumpuhkan dalam win11: Jawapan: Kerana ia berada dalam kedudukan di mana input tidak boleh dilakukan. 1. Secara amnya, keadaan ini berlaku apabila melihat desktop. 2. Kerana kebanyakan masa, kita tidak boleh memasukkan teks pada desktop. 3. Jadi kita hanya perlu datang ke tempat di mana teks boleh dimasukkan untuk menyelesaikan masalah. 4. Pelbagai lokasi input seperti QQ, WeChat, dokumen, notepad, dan halaman web boleh menyelesaikan masalah kaedah input yang dilumpuhkan.

Prinsip MySQL MVCC didedahkan: Bagaimana menangani konflik baca dan tulis dalam urus niaga serentak? Sep 08, 2023 am 08:37 AM

Prinsip MySQLMVCC didedahkan: Bagaimana menangani konflik baca dan tulis dalam urus niaga serentak? Pengenalan: Dalam sistem pangkalan data, pelaksanaan transaksi serentak adalah penting. Walau bagaimanapun, pelaksanaan serentak juga membawa beberapa masalah, salah satunya adalah konflik membaca dan menulis. Apabila berbilang transaksi membaca dan menulis data yang sama pada masa yang sama, ketidakkonsistenan mungkin berlaku. Untuk menyelesaikan masalah ini, MySQL memperkenalkan mekanisme kawalan konkurensi berbilang versi (MVCC). Artikel ini akan mendedahkan prinsip MVCC dan menganalisis secara terperinci bagaimana MySQL mengendalikan konflik baca dan tulis transaksi serentak.

Selesaikan masalah konflik yang mungkin disebabkan oleh menggunakan Zepto dan jQuery pada masa yang sama Feb 24, 2024 pm 06:36 PM

Bagaimana untuk mengendalikan potensi konflik dengan betul apabila menggunakan Zepto dan jQuery? Dalam pembangunan bahagian hadapan, kita sering menghadapi situasi di mana kita perlu menggunakan Zepto dan jQuery pada masa yang sama Walau bagaimanapun, disebabkan beberapa perbezaan dalam pelaksanaan antara kedua-dua, konflik yang berpotensi kadang-kadang timbul. Artikel ini akan membimbing anda tentang cara mengendalikan konflik dengan betul apabila menggunakan Zepto dan jQuery, dan memberikan contoh kod khusus. 1. Perkenalkan Zepto dan jQuery Pertama, kita perlu memperkenalkan Zepto dan jQue ke dalam projek pada masa yang sama

Apa yang perlu dilakukan jika terdapat konflik pemandu dalam win10 versi terkini 1909 Jan 07, 2024 pm 12:45 PM

Untuk sistem win101909 yang dikemas kini, beberapa rakan mendapati bahawa pemandu 1909 tidak serasi dan mempunyai konflik pemandu semasa digunakan. Editor berpendapat bahawa dalam kes ini, anda boleh cuba mengemas kini pemacu atau memulihkan pemacu kepada versi yang lebih lama untuk menyelesaikan masalah. Mari kita lihat bagaimana untuk melakukannya. Cara menyelesaikan konflik pemacu win101909 Kaedah 1. Cari ikon "PC ini" pada desktop dan klik kanannya. Selepas mengklik, menu akan muncul, pilih "Properties" 2. Selepas membuka tetingkap, cari dan klik butang "Device Manager" di sebelah kiri tetingkap 3. Cari item model kad grafik di bawah "Display Adapter", klik kanan, dan pilih Pilih "Kemas Kini Pemacu" dari menu 4. Selepas mengklik, pilih "Carian Automatik" dalam tetingkap pop timbul baharu.

See all articles