国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > htmlcss > 解决blur与click冲突

解决blur与click冲突

来源:程序员人生   发布时间:2016-08-11 08:43:09 阅读次数:2718次

在开发中我们会常常遇到blur和click冲突的情况。下面叙述了开发中常遇到的“下拉框”的问题,并提供了两种解决方案。

1、blur和click事件简述

  • blur事件:当元素失去焦点时触发blur事件;其为表单事件,blur和focus事件不会冒泡,其他表单事件都可以。
  • click事件:当点击元素时触发click事件;所有元素都有此事件,会产生冒泡。

示例1:blur事件为表单事件

<input type="text" id="tel"> <script> document.addEventListener("blur", function(){ console.log("my document blur"); }); var ipt = document.getElementById("tel"); ipt.addEventListener("blur", function(){ console.log("my input blur"); }); </script> // 输出结果:document为非表单元素 my input blur

示例2:click事件可冒泡

<input type="text" id="tel"> <script> document.addEventListener("click", function(){ console.log("my document click"); }); var ipt = document.getElementById("tel"); ipt.addEventListener("click", function(){ console.log("my input click"); }); </script> // 输出结果: my input click my document click

示例3:点击某元素致使前1个元素失去焦点,blur事件优先于click事件

<input type="text" id="ipt"> <input type="button" id="btn" value="点我"> <script> var ipt = document.getElementById("ipt"); ipt.addEventListener("blur", function(){ console.log("my input blur"); }); var btn = document.getElementById("btn"); btn.addEventListener("click", function(){ console.log("my button click"); }); </script> // 输出结果: my input blur my button click

2、下拉框blur和click事件冲突,致使不能正常选择值

实际开发中,我们会常常遇到某1下拉列表框,点击其他元素消失列表框;点击下拉框子元素使其生效的需求。这就会面临冲突问题。

<!-- DOM结构示意 --> <input type="text" placeholder="请选择姓氏" readonly> <div class="search-list" data-status="hide"> <ul> <li><a href="javascript:"></a></li> <li><a href="javascript:"></a></li> <li><a href="javascript:"></a></li> <li><a href="javascript:"></a></li> </ul> </div>
/** 说明: * 目前通过ul外层div自定义属性“data-status”控制其是不是显示 */ (function($){ $("input").focus(function(){ // input框获得焦点,展现下拉框 $(".search-list").attr("data-status", "show"); }).blur(function(){ // input框失去焦点,隐藏下拉框 $(".search-list").attr("data-status", "hide"); }); // 选择对应选项,并赋值给input框 $(".search-list li a").click(function(){ console.log("履行"); $("input").val($(this).text()); }); })(jQuery);

履行上述代码,会出现1个问题,其实不能正确获得下拉框中某值。
缘由:由于JavaScript为单线程,同1时间只能履行处理1个事件。由上述示例3,可得知“blur优先于click履行”。而在本示例中,由于blur处理程序,会将对应的下拉框展现区隐藏,所以致使其后续click事件其实不会履行。上述console的信息也不会被输出。

解决方案1:对blur事件进行延迟,让click先履行。

(function($){ $("input").focus(function(){ // input框获得焦点,展现下拉框 $(".search-list").attr("data-status", "show"); }).blur(function(){ setTimeout(function(){ // input框失去焦点,隐藏下拉框 $(".search-list").attr("data-status", "hide"); }, 300); }); // 选择对应选项,并赋值给input框 $(".search-list li a").click(function(){ console.log("履行"); $("input").val($(this).text()); }); })(jQuery);

3、使用mousedown让其优先履行

示例4:将示例3中的click事件改成mousedown

<input type="text" id="ipt"> <input type="button" id="btn" value="点我"> <script> var ipt = document.getElementById("ipt"); ipt.addEventListener("blur", function(){ console.log("my input blur"); }); var btn = document.getElementById("btn"); btn.addEventListener("mousedown", function(){ console.log("my button mousedown"); }); </script> // 输出结果: my button mousedown my input blur
  • mousedown事件:当鼠标指针移动到元素上方,并按下鼠标按键时,会产生mousedown事件。
  • mouseup事件:当在元素上放松鼠标按钮时,会产生mouseup事件。
    注意
    (1)mousedown与click 事件不同,mousedown事件仅需要按键被按下,而不需要松开便可产生。
    (2)mouseup与click事件不同,mouseup事件仅需要放松按钮。当鼠标指针位于元素上方时,放松鼠标按钮就会触发该事件。

补充:mousedown、mouseup、click

<input type="button" id="btn" value="点我"> var btn = document.getElementById("btn"); btn.addEventListener("mousedown", function(){ console.log("my button mousedown"); }); btn.addEventListener("click", function(){ console.log("my button click"); }); btn.addEventListener("mouseup", function(){ console.log("my button mouseup"); }); 输出结果: my button mousedown my button mouseup my button click

所以,其履行顺序为:

mousedown >> mouseup >> click

解决方案2:将click事件改成mousedown,让其优先于blur事件履行

(function($){ $("input").focus(function(){ // input框获得焦点,展现下拉框 $(".search-list").attr("data-status", "show"); }).blur(function(){ // input框失去焦点,隐藏下拉框 $(".search-list").attr("data-status", "hide"); }); // 选择对应选项,并赋值给input框 $(".search-list li a").mousedown(function(){ $("input").val($(this).text()); }); })(jQuery);
生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生