在開(kāi)發(fā)中我們會(huì)常常遇到blur和click沖突的情況。下面敘述了開(kāi)發(fā)中常遇到的“下拉框”的問(wèn)題，并提供了兩種解決方案。
示例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>
// 輸出結(jié)果：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>
// 輸出結(jié)果：
my input click
my document click示例3：點(diǎn)擊某元素致使前1個(gè)元素失去焦點(diǎn)，blur事件優(yōu)先于click事件
<input type="text" id="ipt">
<input type="button" id="btn" value="點(diǎn)我">
<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>
// 輸出結(jié)果：
my input blur
my button click實(shí)際開(kāi)發(fā)中，我們會(huì)常常遇到某1下拉列表框，點(diǎn)擊其他元素消失列表框；點(diǎn)擊下拉框子元素使其生效的需求。這就會(huì)面臨沖突問(wèn)題。
<!-- DOM結(jié)構(gòu)示意 -->
<input type="text" placeholder="請(qǐng)選擇姓氏" readonly>
<div class="search-list" data-status="hide">
<ul>
<li><a href="javascript:">趙</a></li>
<li><a href="javascript:">錢(qián)</a></li>
<li><a href="javascript:">孫</a></li>
<li><a href="javascript:">李</a></li>
</ul>
</div>/** 說(shuō)明：
* 目前通過(guò)ul外層div自定義屬性“data-status”控制其是不是顯示
*/
(function($){
$("input").focus(function(){
// input框獲得焦點(diǎn)，展現(xiàn)下拉框
$(".search-list").attr("data-status", "show");
}).blur(function(){
// input框失去焦點(diǎn)，隱藏下拉框
$(".search-list").attr("data-status", "hide");
});
// 選擇對(duì)應(yīng)選項(xiàng)，并賦值給input框
$(".search-list li a").click(function(){
console.log("履行");
$("input").val($(this).text());
});
})(jQuery);履行上述代碼，會(huì)出現(xiàn)1個(gè)問(wèn)題，其實(shí)不能正確獲得下拉框中某值。
緣由：由于JavaScript為單線程，同1時(shí)間只能履行處理1個(gè)事件。由上述示例3，可得知“blur優(yōu)先于click履行”。而在本示例中，由于blur處理程序，會(huì)將對(duì)應(yīng)的下拉框展現(xiàn)區(qū)隱藏，所以致使其后續(xù)click事件其實(shí)不會(huì)履行。上述console的信息也不會(huì)被輸出。
解決方案1：對(duì)blur事件進(jìn)行延遲，讓click先履行。
(function($){
$("input").focus(function(){
// input框獲得焦點(diǎn)，展現(xiàn)下拉框
$(".search-list").attr("data-status", "show");
}).blur(function(){
setTimeout(function(){
// input框失去焦點(diǎn)，隱藏下拉框
$(".search-list").attr("data-status", "hide");
}, 300);
});
// 選擇對(duì)應(yīng)選項(xiàng)，并賦值給input框
$(".search-list li a").click(function(){
console.log("履行");
$("input").val($(this).text());
});
})(jQuery);示例4：將示例3中的click事件改成mousedown
<input type="text" id="ipt">
<input type="button" id="btn" value="點(diǎn)我">
<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>
// 輸出結(jié)果：
my button mousedown
my input blur補(bǔ)充：mousedown、mouseup、click
<input type="button" id="btn" value="點(diǎn)我">
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");
});
輸出結(jié)果：
my button mousedown
my button mouseup
my button click所以，其履行順序?yàn)椋?/p>
mousedown >> mouseup >> click
解決方案2：將click事件改成mousedown，讓其優(yōu)先于blur事件履行
(function($){
$("input").focus(function(){
// input框獲得焦點(diǎn)，展現(xiàn)下拉框
$(".search-list").attr("data-status", "show");
}).blur(function(){
// input框失去焦點(diǎn)，隱藏下拉框
$(".search-list").attr("data-status", "hide");
});
// 選擇對(duì)應(yīng)選項(xiàng)，并賦值給input框
$(".search-list li a").mousedown(function(){
$("input").val($(this).text());
});
})(jQuery);
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊(cè)，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請(qǐng)聯(lián)系本站，謝謝！
粵ICP備14040726號(hào)-1?? 2015-2020 程序員人生 版權(quán)所有
