Question

我正在尝试在input元素中键入时显示搜索结果。当用户单击输入元素的一侧时，结果应该被忽略（我还没有包括searh结果）。我试图阻止keyup到html元素的传播。然而，传播继续向上。并在结果显示为输入之前清除结果。我也应该加入keypress吗？

$('#inputsearch').keyup(function(event){

    var searchterms=$('#inputsearch').val();
    console.log(searchterms);
    $.ajax({
        type:'POST',
        data:{'searchterms': searchterms},
        url:'displaysearch.php',
        success: function(response){ 
        $("#searchingresults").empty().html(response);
        }
        });
        event.stopPropagation();
    });
    $('html').click(function(){ $('#searchingresults').empty().hide();});

Answer 1

事件从父html传递到子input，请使用以下代码。它会找到当前单击的目标并阻止操作。 stopPropagation()主要用于阻止事件从子节点冒泡到父节点而不是其他方式。

$('html').click(function (event) {
    if(!$(event.target).is('#inputsearch')){
        $('#searchingresults').empty().hide();
    }
});

<强> Demo

在您的情况下，$('html')上定义了点击事件。所以这将触发DOM中的每个元素;您的input搜索元素正在发生这种情况。只要您单击它以键入输入值，就会触发$('html').click(。

event.stopPropagation（）jquery：如何在.keyup（）中停止传播

1 个答案: