JS如何点击其他区域时隐藏某个标签

Posted 2023-02-22

我是在自定义一个下拉列表遇到的问题：html代码如下
<div class="select-box"> <select> <option value="1" selected="selected">哈哈一</option> <option value="2">哈哈二</option> <option value="3">哈哈三</option> <option value="4">哈哈四</option> <option value="5">哈哈五</option> </select> <input type="text" onclick="SelectInputClick(this)" readonly="readonly" value="哈哈一"> <ul style="display: none;"> <li onclick="SelectLiClick(this)">哈哈一</li> <li onclick="SelectLiClick(this)">哈哈二</li> <li onclick="SelectLiClick(this)">哈哈三</li> <li onclick="SelectLiClick(this)">哈哈四</li> <li onclick="SelectLiClick(this)">哈哈五</li> </ul> </div>
select是隐藏的不用管定位。现在的效果图是

现在遇到一个问题，就是我只有点击input输入框或者li标签选定值，ul标签才会隐藏。但是默认的select下拉框除了点击这两个地方，当鼠标点击其他地方就例如页面空白处或者其他输入框的时候下拉项也会隐藏，也就是我这里的ul标签。
请问我要加什么事件才能点击其他地方的时候我这里的ul进行隐藏。我试过了input的onblur事件失去焦点时进行隐藏，但是这个不行，因为我点击li选择的时候就会先失去焦点，我就无法触发li的onclick事件进行赋值。所以还能有什么方法可以实现点击其他地方然后隐藏ul标签

$(document).on('click',function(event)
判断event.target 来源dom对象，
如果是你指定的input或者select ,return false;

$('xxx').hide();
); 参考技术A $(document).click(function()
$("xxxx").hide()
);追问

你这个方法不行，这样写的话，点击input的的时候也会隐藏。等于是没法选择了。