解決blur與click衝突
阿新 • • 發佈:2019-02-09
在開發中我們會經常遇到blur和click衝突的情況。下面敘述了開發中常遇到的“下拉框”的問題,並提供了兩種解決方案。
一、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:點選某元素導致前一個元素失去焦點,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
二、下拉框blur和click事件衝突,導致不能正常選擇值
實際開發中,我們會經常遇到某一下拉列表框,點選其他元素消失列表框;點選下拉框子元素使其生效的需求。這就會面臨衝突問題。
<!-- 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);
執行上述程式碼,會出現一個問題,並不能正確獲取下拉框中某值。
原因:由於JavaScript為單執行緒,同一時間只能執行處理一個事件。由上述示例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);
三、使用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);