onclick事件不工作，Onmouse工作雖然

我必須建立與AJAX即時搜索，這是當你開始輸入的結果出現，然後如果你點擊任何地方對身體的效果消失，在輸入字段結果再次出現onmouse對像。當點擊輸入欄內的結果消散。onclick事件不工作，Onmouse工作雖然

我想這個結果停留在輸入欄中點擊時onmouse事件後開放。爲此我添加了一個點擊事件，但它不起作用。

請參閱規範和提出任何可能的方式來做到這一點。

<script type="text/javascript"> 
    function showResult(str) { 
     if (str.length == 0) { 
      document.getElementById("search-result").innerHTML = ""; 
      document.getElementById("search-result").style.border = "0px"; 
      return; 
     } 
     if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp = new XMLHttpRequest(); 
     } 
     else { // code for IE6, IE5 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       document.getElementById("search-result").innerHTML = xmlhttp.responseText; 
       document.getElementById("search-result").style.border = "1px solid #A5ACB2"; 
       document.getElementById("search-result").style.display = "block"; 
       document.getElementById("search-input").onmouseover = function() { 
        show_box() 
       }; 
       document.getElementById("search-input").onclick = function() { 
        show_box() 
       }; 
      } 
     } 
     xmlhttp.open("GET", "instant-search.php?keyword=" + str, true); 
     xmlhttp.send(); 
    } 

    function close_box() { 
     fadeOut(); 
     document.getElementById("search-result").style.display = "none"; 

    } 

    function show_box() { 
     setOpacity(0); 
     document.getElementById("search-result").style.display = "block"; 
     fadeIn(); 
    } 
    document.onclick = function() { 
     close_box() 
    }; 

    function setOpacity(value) { 
     document.getElementById("search-result").style.opacity = value/10; 
     document.getElementById("search-result").style.filter = 'alpha(opacity=' + value * 10 + ')'; 
    } 

    function fadeIn() { 
     for (var i = 20; i <= 100; i++) 
     setTimeout('setOpacity(' + (i/5) + ')', 5 * i); 
    } 

    function fadeOut() { 
     for (var i = 20; i <= 100; i++) 
     setTimeout('setOpacity(' + (5 - i/5) + ')', 5 * i); 
    } 
</script>

HTML代碼

<input name="keyword" type="text" size="50" id="search-input" onkeydown="showResult(this.value)" autocomplete="off" /> 
<div id="search-result"></div>

來源

2012-08-03 Tall boY

你的html中的'onclick'事件在哪裏？ – 2012-08-03 07:54:22

它在JavaScript中，我也需要它在html中。 – 2012-08-03 07:55:38

@Bhuvan Rikka：不是在html中，而是以javascript呈現。 – 2012-08-03 07:55:42

我很爲jQuery的，我忘了還有就是在IE上的差異。

if(!e) { 
    e = window.event; 
} 

if(e.stopPropagation && e.preventDefault) { 
    e.stopPropagation(); 
    e.preventDefault(); 
} else { 
    e.cancelBubble = true; 
    e.returnValue = false; 
}

來源

2012-08-03 09:29:43 thinklinux

它現在工作完美。謝謝，你還可以告訴我如何停止再次發生鼠標事件，以便它不會再次在鼠標懸停時顯示褪色效果。 – 2012-08-03 09:41:21

我在你的問題上面評論過 – thinklinux 2012-08-03 09:42:33

，這對onmouseenter或onmouseleave沒有幫助。 – 2012-08-03 09:55:57

試試這個？

<input name="keyword" type="text" size="50" id="search-input" onclick="showResult(this.value)" autocomplete="off" />

或以測試是否工作的onclick

<input name="keyword" type="text" size="50" id="search-input" onclick="alert('replace this with your function you want to call');" autocomplete="off" />

來源

2012-08-03 08:28:38 Francois

是的，這是工作，但我必須這樣做在JavaScript，因爲我必須做它的onclick和的onkeyup這樣，這將導致兩個查詢，而在JavaScript我只是要顯示和隱藏的查詢結果。 – 2012-08-03 08:33:41

我試過@thinklinux方法，它在所有瀏覽器中工作，但不在Internet Explorer中。你有什麼解決方法。 – 2012-08-03 08:35:14

嘗試返回false – ZigZag 2012-08-03 09:27:14

onclick事件不工作，Onmouse工作雖然

回答

相關問題