php - Onclick 事件不起作用，Onmouse 事件却起作用

Question

我用AJAX构建了一个即时搜索，就像当你开始输入结果时出现，然后如果你点击正文上的任何地方结果就会消失，鼠标悬停在输入字段结果会重新出现。当在输入字段内单击时，结果消失。

当在输入字段中单击时，我希望此结果在 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>

Answer 1

我太喜欢 jQuery 了，以至于忘记了 IE 上的区别。

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

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