下拉列表在不需要的时间关闭

我想用drop-down list创建search-input。当我关注或点击除search-input以外的任何地方时，该列表必须关闭。下拉列表在不需要的时间关闭

我把listClose()加到"blur"-Listener。但现在我无法从下拉式元素中捕捉点击事件。哪一个是我真正需要的事件监听器？或者我需要另一种认识？

请运行下面的代码片段。我试图写得最清楚。

document.addEventListener("DOMContentLoaded", function() { 
 
    var inputElement = document.getElementById("input_word-search"); 
 
    var listElement = document.getElementById("dd-menu_search-input"); 
 

 
    // Input will focused when document is ready. 
 
    inputElement.focus(); 
 

 
    listOpen = function() { 
 
    listElement.classList.add('dd-open'); 
 
    }; 
 

 
    listClose = function() { 
 
    listElement.classList.remove('dd-open'); 
 
    }; 
 

 
    inputElement.addEventListener("focus", function(e) { 
 
    listOpen(); 
 
    }); 
 

 
    inputElement.addEventListener("blur", function(e) { 
 
    listClose(); 
 
    }); 
 
})

.dd-menu { 
 
    padding: 8px 0; 
 
    background-color: #fff; 
 
    border: 1px solid #ccc; 
 
    border-radius: 5px; 
 
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2); 
 
    position: absolute; 
 
    display: none; 
 
} 
 

 
.dd-suggestion { 
 
    cursor: pointer; 
 
    text-align: left; 
 
    padding: 3px 20px; 
 
    line-height: 24px; 
 
} 
 

 
.dd-suggestion:hover { 
 
    color: #fff; 
 
    background-color: #697981; 
 
} 
 

 
.dd-open { 
 
    display: block; 
 
} 
 

 
.dd-empty { 
 
    display: none; 
 
} 
 

 
#dd-menu_search-input { 
 
    width: 74%; 
 
}

<body> 
 

 
    <div id="input-group"> 
 
    <input id="input_word-search" class="input_search suggest__field" type="search" autocomplete="off" name="q" placeholder="Seach"> 
 
    <div id="dd-menu_search-input" class="dd-menu dd-open"> 
 
     <div class="dd-dataset"> 
 
     <div class="dd-suggestion" onclick="alert('Click!')"> 
 
      suggestion-1 
 
     </div> 
 
     <div class="dd-suggestion" onclick="alert('Click!')"> 
 
      suggestion-2 
 
     </div> 
 
     <div class="dd-suggestion" onclick="alert('Click!')"> 
 
      suggestion-3 
 
     </div> 
 
     <div class="dd-suggestion" onclick="alert('Click!')"> 
 
      suggestion-4 
 
     </div> 
 
     <div class="dd-suggestion" onclick="alert('Click!')"> 
 
      suggestion-5 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body>

来源

2017-05-09 Palindromer

鼠标按下事件是否有任何'stopPropagation（）'在你的代码或'返回FALSE' ？ –

@NikhilNanjappa没有。问题与我提供的代码一起玩。 – Palindromer

我问，因为我为什么onmousedown会工作，但onclick不会。 –

我添加布尔变量，表示对drop-down list

var mousedownOnNodeCalee = false; 

    listElement.addEventListener("mousedown", function (e) { 
     mousedownOnNodeCalee = true; 
    }); 

    inputElement.addEventListener("blur", function (e) { 
     if(!mousedownOnNodeCalee) { 
      listClose(); 
      return; 
     } 
     inputElement.focus(); 
     mousedownOnNodeCalee = false; 
    });

来源

2017-05-09 11:17:18 Palindromer

的溶液（或可能我说的解决方法）是使用onmousedown代替onclick，所以它看起来就像这样（请注意，我还准备卸下alert()和使用console.log()代替）

<body> 

    <div id="input-group"> 
    <input id="input_word-search" class="input_search suggest__field" type="search" autocomplete="off" name="q" placeholder="Seach"> 
    <div id="dd-menu_search-input" class="dd-menu dd-open"> 
     <div class="dd-dataset"> 
     <div class="dd-suggestion" onmousedown="console.log('Click!')"> 
      suggestion-1 
     </div> 
     <div class="dd-suggestion" onmousedown="console.log('Click!')"> 
      suggestion-2 
     </div> 
     <div class="dd-suggestion" onmousedown="console.log('Click!')"> 
      suggestion-3 
     </div> 
     <div class="dd-suggestion" onmousedown="console.log('Click!')"> 
      suggestion-4 
     </div> 
     <div class="dd-suggestion" onmousedown="console.log('Click!')"> 
      suggestion-5 
     </div> 
     </div> 
    </div> 
    </div> 

</body>

来源

2017-05-09 09:21:04

谢谢，它的工作！不幸的是，它唯一的解决方法。因为dd菜单有填充。当我点击这个填充时，dd-list将会关闭。 – Palindromer

请告诉我为什么'onmousedown'工作和'onmouseclick'不起作用？ – Palindromer

'onmousedown'事件在'blur'事件之前注册，这就是它工作的原因。这里的问题在于你的'blur'事件关闭了列表，因此该列表的所有'click'事件都不能被触发，因为列表被关闭。你不得不坚持'模糊'事件的方法吗？ –

的原因是，当您事件的内容文本框，它叫blur功能列表立即disapear。所以你不能点击列表。您可以通过setTimeout打印机视图来listClose()这样

listClose = function() { 
    setTimeout(()=>{ 
     listElement.classList.remove('dd-open'); 
    },100) 
};

来源

2017-05-09 09:43:45 Duannx

下拉列表在不需要的时间关闭

回答

相关问题