input的blur事件隐藏div,div上的onclick事件不生效解决方案

之前做一个项目,点击当获取input输入框的焦点时,将之前搜索的列表显示,失去焦点时隐藏这个列表,列表上有点击事件进行搜索【不使用插件和框架】。

问题:点击列表的时候不触发列表的点击事件?


<input type="text" name="" onfocus="show()" onblur="hide()" />
//这个input控制下面test列表div的显示和隐藏
<div id="test" onclick="clickThis()">test</div>


<script>
var div = document.getElementById("test");
	function show(){
		div.style.display="block"
	}
	function hide(){
		div.style.display="none"
	}

	function clickThis(){
		alert(div)
	}
</script>
</html>

原因:点列表的时候就相当于触发了input的blur事件,列表就隐藏了,点击事件就不生效了

解决方案如下:

1、在blur的回调函数中加一个定时器**,延迟blur回调函数的执行时间,这样的话虽然在点击div的时候,input的blur行为先被触发,但是由于加了定时器延迟,所以得等到div的click回调执行完成后才能执行input的blur行为的回调;

代码:

	function hide(){
		setTimeout(function(){ 
			div.style.display="none" 
		},300)}
	}

2、将div的click事件改成mousedown**事件,因为mousedown行为是鼠标点下去的时候就被触发,而click行为是鼠标点下去再抬起的时候才被触发

代码:

<div id="test" onmousedown="clickThis()">test</div>
{/* <FormPro.Item label="套餐商品" required> <FormPro.List name="oldComboRel" initialValue={['']}> {(fields, { add, remove }) => ( <> {fields.map((field, index) => ( <div style={{ display: 'flex', alignItems: 'flex-start' }} key={index}> <FormPro.Item {...field} rules={[ { required: true, message: '请添加套餐内容' }, { max: 20, message: '内容不能超过20个字符' }, ]} > <Input placeholder="请输入" maxLength={20} style={{ width: '400px' }} value={form.getFieldValue('oldComboRel')?.[index] || ''} readOnly={isReadOnly} onFocus={isReadOnly ? (e) => e.target.blur() : undefined} onChange={!isReadOnly ? (e) => handleComboProductChange(e.target.value, index) : undefined} /> </FormPro.Item> {!isReadOnly && fields.length > 1 && ( <Button type="text" onClick={() => { remove(index); setTimeout(() => { const values = form.getFieldValue('oldComboRel') || []; const validValues = values.filter( (item: string) => item && item.trim() !== '', ); syncMaterialProperties(validValues); }, 0); }} style={{ color: '#FF6A00', marginLeft: '10px', display: 'flex', justifyContent: 'center', }} > 删除 </Button> )} </div> ))} {!isReadOnly && fields.length < 8 && ( <Button type="text" style={{ color: '#FF6A00' }} onClick={() => { add(); setTimeout(() => { const values = form.getFieldValue('oldComboRel') || []; const validValues = values.filter( (item: string) => item && item.trim() !== '', ); syncMaterialProperties(validValues); }, 0); }} > + 添加商品 </Button> )} </> )} </FormPro.List> </FormPro.Item> */}如果 都写死 width 400px 的话 那么 适用人数 和 套餐内容的 布局样式 没问题 都是一样的 但是改为 maxwidth 400px 的话 适用人数 没问题。而 套餐内容 就不生效 导致 缩放问题
最新发布
06-27
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值