Question

在我的网站上，我有很多搜索框。在外部点击这些结果时，我使用javascript来隐藏搜索结果。为此我使用下面的代码

$(document).click(function (e) {

    if (!$(e.target).is('#elem1, #elem2, #elem3, #elem4, #elem5')) {
        $("#elem1").hide();
        $("#elem1").html("");
        $("#elem2").hide();
        //$("#elem3").hide();
        $("#elem4").show();
        $("#elem5").show();
    }
});

搜索字段是

<form name="form-name">
    <input type="text" value="" id="search-field" />
    <button value="search" id="search-button">
</form>

搜索列表

<div id="id1">
    <ul>
    <li>data2</li>
    <li>data3</li>
    <li>data4</li>
    <li>data5</li>
     <li>data6</li>
    </ul>
</div>

我通过以下代码识别enter新闻

$("#search-field").keyup(TriggeredFunction);

function TriggeredFunction(e) {
e = e || window.event;
var keycode;
if (window.event) {
    keycode = e.which ? window.event.which : window.event.keyCode;
}
var key = e.which;
switch (key) {
    case 13:
        //action code
        break;
    default: 
        //default code
}
}

此代码完美无缺。并且li上的点击事件有效。但是一旦我尝试编写一个按enter键时调用的函数。 enter按下时调用了上述$(document).click()函数（此时click上的li也正常工作。这样搜索结果就变空了。我从搜索结果中获取数据。因此，我无法获取数据。有什么方法可以防止这种情况吗？请帮忙

Answer 1

您可能最好在搜索字段上停止冒泡。

在JQuery中：

$( "#search-field, #search-button" ).click(function( event ) {
  event.stopPropagation();
});

在vanilla JavaScript中：

if(event.stopPropagation) {
    event.stopPropagation();
} else {
    event.cancelBubble = true;
}

使用元素id单击页面的其他部分隐藏div

1 个答案: