停止事件的內容時，點擊搜索結果中的div

Question

這是參考代碼在這個小提琴：http://jsfiddle.net/x8whpx09/17/

我試圖創建在用戶輸入的東西，會彈出一個結果列表的搜索框。我遇到的問題是當用戶點擊除搜索結果列表將關閉的輸入元素以外的任何地方。我有一個附加到父DIV的焦點事件，但即使我將它附加到輸入，我也會得到相同的行爲。我想要的是用戶能夠選擇列表上的滾動條，而不是讓列表消失。如果他們點擊輸入的外部或列表，那麼列表應該關閉。

現在它關閉，無論他們點擊哪裏，除非它在輸入中。

編輯：performSearch函數體包裝在AJAX請求中。

SOLUTION：我終於明白髮生了什麼事。您需要綁定到mousedown事件並返回false以允許在下拉列表中選擇滾動條。這question終於給了我解決方案。

$target.on('mousedown',function (event) { 
      return false; 
     }); 

這裏是在小提琴代碼：

var search = { 
 
    closing: null, 
 
    performSearch: function(elem, e) { 
 
    var $this = $(elem); 
 
    var $target = $('#search-results'); 
 
    if ($target.length === 0) { 
 
     $target = $('<div id="search-results" class="sb-list"></div>'); 
 
     $target.insertAfter($this); 
 
     var p = $this.position(); 
 
     $target.css('top', (p.top + $this.height() + 15) + 'px'); 
 
     $target.css('width', ($this.width() + p.left + 10) + 'px'); 
 
     $target.css('width', ($this.width() + 25) + 'px'); 
 
     $target.css('left', (p.left) + 'px'); 
 
     $target.slideDown('fast', function() { 
 
     $target.css('overflow', 'auto'); 
 
     }); 
 
     $target.on('mouseover', '.sb-row', function() { 
 
     $(elem).addClass('sb-active'); 
 
     $('.sb-active').removeClass('sb-active'); 
 
     }); 
 
     $target.on('click', '.sb-row', search.click); 
 
     //$target.parent().on('focusin focusout', search.listFocus); 
 
    } else { 
 
     $target.empty(); 
 
     $target.slideDown('fast', function() { 
 
     $target.css('overflow', 'auto'); 
 
     }); 
 
    } 
 

 
    for (i = 0; i < 40; i++) { 
 
     var html = []; 
 
     html.push('<div class="sb-row' + (i == 0 ? ' sb-active' : '') + '">'); 
 
     html.push('<a href="#">test result' + i + '</a>'); 
 
     html.push('</div>'); 
 

 
     var $out = $(html.join('')); 
 
     $target.append($out); 
 
    } 
 
    }, 
 
    delayClose: function(e) { 
 
    console.log('delayClose'); 
 
    var self = this; 
 
    console.log('results focused: ' + $('#search-results').is(':focus')); 
 
    console.log('div focused: ' + $('#parent').is(':focus')); 
 
    search.closing = window.setTimeout(function() { 
 
     search.close.apply(self, arguments); 
 
    }, 1000); 
 
    }, 
 
    listFocus: function(e) { 
 
    console.log(e.type); 
 
    var self = this; 
 
    window.clearTimeout(search.closing); 
 
    }, 
 
    click: function(e) { 
 
    console.log('clicked'); 
 
    }, 
 
    close: function(e) { 
 
    console.log('closing'); 
 
    window.clearTimeout(search.closing); 
 
    var $this = $(this); 
 
    $('#search-results').slideUp('fast'); 
 
    } 
 
}; 
 

 
$(document).ready(function() { 
 
    $searchBox = $('#search'); 
 
    $searchBox.on('focus', function(e) { 
 
    this.value = ''; 
 
    this.select(); 
 
    e.stopPropagation(); 
 
    return false; 
 
    }); 
 
    $searchBox.on('keyup', function(e) { 
 
    search.performSearch($searchBox[0], e); 
 
    }); 
 
    $searchBox.parent().on('focusout', search.delayClose); 
 
});

.sb-list { 
 
    position: absolute; 
 
    width: 250px; 
 
    top: 0; 
 
    left: 0; 
 
    height: 300px; 
 
    background: #FAFAFA; 
 
    border: solid 1px #999; 
 
    border-top: none; 
 
    display: none; 
 
    overflow: auto; 
 
    z-index: 92592; 
 
    -webkit-box-shadow: 0 2px 2px #999999; 
 
    -moz-box-shadow: 0 2px 2px #999999; 
 
    -ms-box-shadow: 0 2px 2px #999999; 
 
    box-shadow: 0 2px 2px #999999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="parent"> 
 
    <input type="text" id="search" /> 
 
</div>

Answer 1

您這裏有一些故障碼和多事情來解決。如果您檢查#search（輸入框），則會看到每輸入一個字符，搜索結果都會出現。也就是說，你最終會得到多個id="search-results"元素。此單個錯誤

一個非常簡單的ONELINE解決方案是增加$('#search-results').remove();到您的performSearch處理函數：

performSearch: function (elem, e) { 
    $('#search-results').remove(); 
    // ... 
} 

我已經創建了一個updated JSFiddle展示其功能和額外的不便和錯誤此介紹的一個當你點擊#search-results下拉本身時，他們缺乏正確的事件處理。

我建議你試試看，在使用Developer Tools或Javascript調試器進行搜索的代碼中跟蹤錯誤的來源，因爲代碼中有很多部分需要修復或重新考慮;一個答案太多了。