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
### 在 div 元素中使用 blur 事件处理程序 在 HTML 中,`blur` 事件通常与可聚焦的元素相关联,例如输入框、按钮等。然而,默认情况下,`div` 元素是不可聚焦的,因此其 `blur` 事件不会被触发[^1]。为了使 `div` 元素能够响应 `blur` 事件,需要为其添加 `tabindex` 属性。 #### 设置 tabindex 属性 通过为 `div` 元素添加 `tabindex="-1"` 属性,可以使其成为可聚焦的元素。一旦 `div` 获得焦点,它就可以触发 `blur` 事件,当它失去焦点时。 ```html <div id="focusableDiv" tabindex="-1" onblur="handleBlur()" onclick="handleFocus()"> 点击我以获得焦点 </div> <script> function handleFocus() { let div = document.getElementById('focusableDiv'); div.focus(); // 手动设置焦点 } function handleBlur() { console.log('div 失去了焦点'); } </script> ``` 在上述代码中,`div` 元素通过 `tabindex="-1"` 属性变为可聚焦。点击该 `div` 时,会调用 `handleFocus()` 函数,手动设置焦点到该 `div` 上。当 `div` 失去焦点时,将触发 `onblur` 事件,并执行 `handleBlur()` 函数。 #### 事件流与 blur 事件 需要注意的是,`blur` 事件不会冒泡。这意味着如果尝试在父级元素上捕获子元素的 `blur` 事件,将无法实现。这是因为 `blur` 和 `focus` 事件仅限于当前元素,且不遵循标准的事件冒泡或捕获机制[^2]。 #### Vue 和 React 中的 blur 事件处理 在 Vue 和 React 等框架中,`blur` 事件的处理方式略有不同。例如,在 Vue 中,可以通过绑定事件处理器来处理 `blur` 事件: ```vue <template> <div tabindex="-1" @blur="handleBlur" @click="handleFocus"> 点击我以获得焦点 </div> </template> <script> export default { methods: { handleFocus() { const div = this.$el; div.focus(); }, handleBlur() { console.log('Vue 中的 div 失去了焦点'); } } }; </script> ``` 而在 React 中,可以类似地处理: ```jsx import React, { useRef } from 'react'; function BlurExample() { const divRef = useRef(null); const handleFocus = () => { divRef.current.focus(); }; const handleBlur = () => { console.log('React 中的 div 失去了焦点'); }; return ( <div ref={divRef} tabIndex="-1" onBlur={handleBlur} onClick={handleFocus} > 点击我以获得焦点 </div> ); } export default BlurExample; ``` 在上述代码中,分别展示了如何在 Vue 和 React 中处理 `blur` 事件。通过 `tabIndex="-1"` 属性,确保了 `div` 元素能够获得焦点并触发 `blur` 事件。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值