解决模糊与点击之间的冲突
前言:uff1a
在开发过程中,
经常会遇到模糊与点击之间的冲突,本文对开发中经常遇到的下拉框问题进行了描述,并提出了两种解决方案。
一、模糊点击事件
模糊事件:当元素失去焦点时触发模糊事件;它是一个表单事件,模糊和焦点事件不会冒泡,其他形式事件可用。
单击事件:单击元素时,单击事件被触发;所有元素都有此事件,从而产生气泡。
示例1:模糊事件是一个表单事件
Document.addEventListener(模糊
console.log(我的
文档模糊);
});
VaR ipt = document.getelementbyid(电话);
Ipt.addEventListener(模糊
console.log(我的
输入模糊);
});
结果:文档输出非形式元素
我输入的模糊
示例2:单击事件可以冒泡
Document.addEventListener(单击
console.log(我的文档单击);
});
VaR ipt = document.getelementbyid(电话);
Ipt.addEventListener(单击
console.log(我输入);
});
输出结果:
我输入点击
点击我的文档
示例3:单击元素会导致前一个元素失去焦点,而模糊事件位于单击事件之前。
VaR ipt = document.getelementbyid(
脚本);
Ipt.addEventListener(模糊
console.log(我的输入模糊);
});
VaR建立document.getelementbyid(-);
Btn.addEventListener (click
console.log(我的按钮);
});
输出结果:
我输入的模糊
我的按钮
两。下拉框模糊并单击事件冲突,导致无法选择正常值。
在实际开发中,我们经常会遇到一个下拉列表框,点击列表框中的其他元素,点击下拉框消失,使元素成为有效的需求,这将面临冲突的问题。
赵
钱
太阳
梅子
显示/ **:
* UL外层层的当前div自定义
属性数据状态
控制它是否显示
* /
(
函数($){)
$(输入)。焦点(函数(){)
用于焦点的输入框,显示下拉框
$(
搜索列表)。Attr(数据状态
}Blur(函数(){)
输入框丢失焦点,隐藏下拉框。
$(搜索列表)。Attr(数据状态
});
选择相应的
选项,并分配给输入框
$(搜索列表)Click(函数(){(){)
console.log(
执行);
$(输入)。瓦迩($(this));
});
}(jQuery);
要执行上面的代码,会出现问题,在下拉框中获取一个值是不
正确的。
原因:因为Javascript是单
线程的,它只能在同一时间执行一个事件。从上面的例子3,它是已知的,模糊之前,单击执行。在这个例子中,由于模糊
处理器,相应的下拉框显示
区域是隐藏的,所以其后续的点击事件不执行。上述控制台的信息将不会被输出。
解决方案1:延迟模糊事件并单击执行第一。
(函数($){)
$(输入)。焦点(函数(){)
用于焦点的输入框,显示下拉框
$(搜索列表)。Attr(数据状态
}Blur(函数(){)
setTimeout(){()函数(
输入框丢失焦点,隐藏下拉框。
$(搜索列表)。Attr(数据状态
},300);
});
选择相应的选项,并分配给输入框
$(搜索列表)Click(函数(){(){)
console.log(执行);
$(输入)。瓦迩($(this));
});
}(jQuery);
三。用
鼠标把它优先
例4:在例3的点击鼠标事件
VaR ipt = document.getelementbyid(脚本);
Ipt.addEventListener(模糊
console.log(我的输入模糊);
});
VaR建立document.getelementbyid(-);
Btn.addEventListener(mouseDown
console.log(我的按钮mousedown );
});
输出结果:
我的鼠标按钮
我输入的模糊
MouseDown事件:当鼠标指针移动到元素并按下鼠标按钮,鼠标按下事件发生。
MouseUp事件:当鼠标按键在元轻松的MouseUp事件发生。
小心 uff1a
(1)MouseDown事件
不同于点击事件,和MouseDown事件只需要按被压制,没有松动。
(2)不同的单击事件的MouseUp事件,只需要为MouseUp事件放松按钮,当鼠标指针位于元,鼠标按钮的触发事件的松弛。
补充:MouseDown,MouseUp,点击
VaR建立document.getelementbyid(-);
Btn.addEventListener(mouseDown
console.log(我的按钮mousedown );
});
Btn.addEventListener(单击
console.log(我的按钮);
});
Btn.addEventListener(MouseUp
console.log(我的按钮mouseup );
});
输出结果:
我的鼠标按钮
我松开鼠标按钮
我的按钮
因此,执行
顺序如下:
> > >点击鼠标松开鼠标
解决方案2:改变的单击事件以MouseDown为主的模糊事件的执行
(函数($){)
$(输入)。焦点(函数(){)
用于焦点的输入框,显示下拉框
$(搜索列表)。Attr(数据状态
}Blur(函数(){)
输入框丢失焦点,隐藏下拉框。
$(搜索列表)。Attr(数据状态
});
选择相应的选项,并分配给输入框
$(。搜索列表里)。Mousedown(function(){(){)
$(输入)。瓦迩($(this));
});
}(jQuery);
谢谢你的阅读。我希望你能帮助你,谢谢你对这个站的
支持。