Question

我有一个即时搜索，结果在“ instant-search ”div中。还有另一个div“ search-radio ”，其中我保留了选择搜索类别的选项。

我设置了一个删除结果的文档点击事件，但点击“ instant-search ”div时结果也会消失。

我设置了一些 e.target || e.srcElement 事件，以防止结果在“即时搜索”div点击时消失。

这在Firefox中运行良好，但在任何其他浏览器中都不起作用。

我的完整jQuery代码：

$(document).ready(function () {
 $('#search-radio').css('display', 'block');
 $('#search-input').keyup(function()
    {
     var searchIn = $("input:radio:checked").val();
     var keyword=$(this).val();
     $.get('../search/instant-search.php', {keyword: keyword, searchIn:searchIn}, function(data)
        {
        $('#instant-search').html(data);
         });
         $('#search-result').fadeIn(250);
     });

  $('#search-input').attr('autocomplete','off');
  $('#search-input').attr('placeholder','Search');

  $('#search-input').mouseenter(function(){$('#search-result').fadeIn(250);});
  $('#search-input').mouseleave(function(){$('#search-result').fadeOut(250);});

  $('#search-result').on('mouseenter mouseleave', function()
  { 
      $('#search-result').stop();

      $(document).on('click', function(e) 
       {
        if(
           ((e.target.id || e.srcElement.id) != 'instant-search') 
        && ((e.target.id || e.srcElement.id) != 'search-input') 
        && ((e.target.id || e.srcElement.id) != 'search-result')
        && ((e.target.id || e.srcElement.id) != 'search-radio') 
        && ((e.target.id || e.srcElement.id) !='instant-search-container') 
        && ((e.target || e.srcElement).hasclass != 'instant-search') 
        && ((e.target.id || e.srcElement.id) !='check-all')) 
          {
          $('#search-result').fadeOut(250);
          }
       });

   });

});

我的HTML代码：

    <div id="search-wrapper">
<form action="" method="get" id="search-form" >
<div id="search">
<input name="keyword" type="text" size="50"  id="search-input"  />
</div><!--end of search-->

<div id="search-result">
<div id="instant-search"></div><!--end of instant-search-->
<div id="search-radio">
<p>Search In:</p>
  <ul>
      <li><label><input name="search" type="radio" value="all" checked="checked" id="check-all" >All</label></li>
      <li><label><input name="search" type="radio" value="Category2" >Category2</label></li>
      <li><label><input name="search" type="radio" value="Category3" >Category3</label></li>
      <li><label><input name="search" type="radio" value="Category4" >Category4</label></li>
      <li><label><input name="search" type="radio" value="Category5" >Category5</label></li>
  </ul>
</div><!--end of search-radio-->
</div><!--end of search-result-->
</form>
</div><!--end of search-wrapper-->

修改：请参阅 e.target || e.srcElement 不在其他地方工作 ul li 和无线电输入。

我希望这适用于所有浏览器。

请参阅并建议任何可行的方法。

感谢。

Answer 1

试试这个：

$(function() {
    $('#search-radio').css('display', 'block');

    $('#search-input').on({
        keyup: function() {
            var searchIn = $("input:radio:checked").val();
            var keyword = this.value;
            $.get('../search/instant-search.php', {
                keyword: keyword,
                searchIn: searchIn
            }, function(data) {
                $('#instant-search').html(data);
            });
            $('#search-result').stop().fadeIn(250);
        },
        mouseenter: function() {
            $('#search-result').stop().fadeIn(250);
        },
        mouseleave: function() {
            $('#search-result').stop().fadeOut(250);
        }
    }).attr('autocomplete', 'off').attr('placeholder', 'Search');

    $('#search-result').on('mouseenter mouseleave', function() {
        $('#search-result').stop();
    });

    $(document).on('click', function(e) {
        var flag = true;
        $.each($('*','#search-wrapper'), function(i,elm) {
            if (e.target===elm) flag=false;
        });
        if (flag) $('#search-result').fadeOut(250);
    });
});

FIDDLE

jQuery-e.target || e.srcElement不在类上工作

1 个答案: