Vue Element UI el-autocomplete 组件点击外部触发函数实现方法
要实现在点击除了输入框和输入建议项之外的其他地方触发一个函数,可以使用事件委托的方式监听整个文档的点击事件,然后判断点击的目标元素是否是输入框或输入建议项,如果不是则触发相应的函数。
以下是一个示例代码:
document.addEventListener('click', function(event) {
var target = event.target;
var inputBox = document.getElementById('inputBox');
var suggestionItems = document.getElementsByClassName('suggestion-item');
// 判断点击的目标元素是否是输入框或输入建议项
if (target !== inputBox && !isDescendant(target, suggestionItems)) {
// 触发相应的函数
yourFunction();
}
});
// 判断一个元素是否是另一个元素的后代元素
function isDescendant(child, parentArray) {
for (var i = 0; i < parentArray.length; i++) {
if (parentArray[i].contains(child)) {
return true;
}
}
return false;
}
在上述代码中,监听了整个文档的点击事件,然后判断点击的目标元素是否是输入框或输入建议项,如果不是,则触发相应的函数。这里使用了isDescendant函数来判断一个元素是否是另一个元素的后代元素。
原文地址: https://www.cveoy.top/t/topic/qXH 著作权归作者所有。请勿转载和采集!