Há uma caixa suspensa usando Ajax na caixa de pesquisa na página inicial do Sina. Precisamos implementar um item de clique na caixa suspensa para fazer com que o valor na caixa de pesquisa se torne este item, e a caixa suspensa desaparece, mas, ao mesmo tempo, ao clicar em outros lugares, a caixa suspensa também desaparecerá. Como mostrado na figura:
Usamos o OnBlur e o OnClick para ocultar a caixa suspensa, mas surge um problema maior. Essas duas funções conflitam. Onblur é muito poderoso e não há chance de implementar o método OnClick. A caixa de pesquisa não pode obter o conteúdo do item de clique. Este é o problema do conflito OnClick e Onblur que queremos resolver.
Para este problema, introduzimos duas soluções:
1. Use o setTimeout para atrasar a execução do tempo OnBlur e execute o OnBlur após a execução do OnClick. (A configuração de tempo do setTimeout deve estar acima de 100ms, caso contrário, ainda não funciona) O código de exemplo é o seguinte:
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <style> *{margem: 0; preenchimento: 0; estilo de lista: nenhum; } formulário {width: 500px; margem: 0 automático; Posição: relativa; zoom: 1; } formulário: depois {claro: ambos; contente: ""; exibição: bloco; } .Text {float: esquerda; borda: 1px sólido #cccccc; Potding-esquerda: 14px; Largura: 300px; Altura: 34px; altura de linha: 34px; Size da fonte: 14px; } .button {width: 50px; Altura: 34px; borda: 1px sólido #cccccc; altura de linha: 34px; Size da fonte: 14px; Cor: #ffffff; Antecedentes:#FF8400; } ul {posição: absoluto; topo: 36px; Esquerda: 0; Largura: 300px; Right-direita: 1px sólido #cccccc; Border-Ift: 1px sólido #cccccc; Antecedentes: verde; Exibir: Nenhum; } li {font-size: 14px; altura de linha: 34px; Altura: 34px; Cor:#000000; fundo de borda: 1px Solid #cccccc; } Li: Hover {Background: Yellow; Cor: vermelho; Cursor: Ponteiro; } </style> <cript> window.onload = function () {var otext = document.getElementById ('text'); var al = document.getElementById ('ul'); var ali = Oul.getElementsByTagName ('li'); Var Timer = NULL; otext.onfocus = function () {this.value = ''; ol.style.display = 'bloco'; for (var i = 0; i <ali.length; i ++) {ali [i] .OnClick = function () {clearTimeout (timer); otext.value = this.innerhtml; ol.style.display = 'nenhum'; }; }}; otext.onBlur = function () {timer = setTimeout (function () {Ol.style.display = 'nenhum'; if (! otext.value) {otext.value = 'por favor, digite a palavra -chave';}}, 120); }; }; </script> </ad Head> <body> <form> <input type = "text" value = "por favor, digite a palavra -chave" id = "text"/> <input type = "button" value = "search"/> <ul id = "ul"> <li> Retorne se a janela foi fechada </li> <li> Retornar a altura da área de exibição do documento da janela <li> </li> <li> Defina ou retorne o nome da janela. </li> <li> Retorne à altura externa da janela. </li> </ul> </morm> </body> </html>2. Use Document.onMousedown para substituir o OnBlur para implementar a função suspensa oculta
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <style> *{margem: 0; preenchimento: 0; estilo de lista: nenhum; } formulário {width: 500px; margem: 0 automático; Posição: relativa; zoom: 1; } formulário: depois {claro: ambos; contente: ""; exibição: bloco; } .Text {float: esquerda; borda: 1px sólido #cccccc; Potding-esquerda: 14px; Largura: 300px; Altura: 34px; altura de linha: 34px; Size da fonte: 14px; } .button {width: 50px; Altura: 34px; borda: 1px sólido #cccccc; altura de linha: 34px; Size da fonte: 14px; Cor: #ffffff; Antecedentes:#FF8400; } ul {posição: absoluto; topo: 36px; Esquerda: 0; Largura: 300px; Right-direita: 1px sólido #cccccc; Border-Ift: 1px sólido #cccccc; Antecedentes: verde; Exibir: Nenhum; } li {font-size: 14px; altura de linha: 34px; Altura: 34px; Cor:#000000; fundo de borda: 1px Solid #cccccc; } Li: Hover {Background: Yellow; Cor: vermelho; Cursor: Ponteiro; } </style> <cript> window.onload = function () {var otext = document.getElementById ('text'); var al = document.getElementById ('ul'); var ali = Oul.getElementsByTagName ('li'); Var Timer = NULL; otext.onfocus = function () {this.value = ''; ol.style.display = 'bloco'; for (var i = 0; i <ali.length; i ++) {ali [i] .OnClick = function () {clearTimeout (timer); otext.value = this.innerhtml; ol.style.display = 'nenhum'; }; }}; document.onMouseDown = function (ev) {var oevent = ev || event; var no destino = oEvent.Target || oEvent.srcelement; if (Target.ParentNode! == OU && Target! == Otext) {Oul.style.display = 'None'; }}; otext.onblur = function () {if (! otext.value) {otext.value = 'por favor, digite a palavra -chave'; }}; }; </script> </ad Head> <body> <form> <input type = "text" value = "por favor, digite a palavra -chave" id = "text"/> <input type = "button" value = "search"/> <ul id = "ul"> <li> retornar se a janela foi fechada <li> <li> Retornar a altura da área de exibição do documento da janela <li> <li> <li> </li> <li> Defina ou retorne o nome da janela. </li> <li> Retorne à altura externa da janela. </li> </ul> </morm> </body> </html>A solução rápida para o problema de conflito acima de OnClick e Onblur é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.