在jQuery中阻止来自第一个处理程序的其他事件处理程序

Question

我在页面上有输入字段和提交按钮。

<form id="searchform">
<input id="s" type="search" autocomplete="off" name="s" value="">
<div id="search-submit" class="input-group-addon">
    <i>SUBMIT</i>
</div>
</form>

这里是jQuery代码：

var inProgress = false; 

$("#search-submit").on("click", function() {
    inProgress = true;
    alert ("Form Submit");
    inProgress = false;   
});

$("#s").blur(function () {
    if ( ! inProgress ) {
        alert ("Blur");
    inProgress = false; 
    }
});

我想防止模糊，如果从输入字段点击提交div，但想允许它，如果从输入字段点击页面的其他部分。我无法使用“提交”按钮。

我已竖起了小提琴。净/405kzboh/1

但是现在我甚至不明白为什么点击事件没有在模糊事件之前触发，如果有人从输入点击提交！

Answer 1

Reference: http://stackoverflow.com/questions/10652852/jquery-fire-click-before-blur-event

Solution 1: stop event propogation in mousedown event, if you want to go with the click event

$("#search-submit").on("click", function() {      
    inProgress = true
    alert ("Form Submit");
    inProgress = false;      
});

$("#s").on("blur", function (e) {
    e.stopPropagation();
    if ( ! inProgress ) {
        alert ("Blur");
        inProgress = false; 
    }
});

$("#search-submit").on("mousedown", function(event) {  
    event.preventDefault();
});


Solution:2 -> use mousedown instead of click event

$("#search-submit").on("mousedown", function(event) {      
    inProgress = true;
    alert ("Form Submit");
    inProgress = false;  
    $("#s").off("blur");
});

$("#s").on("blur", function (e) {
    e.stopPropagation();
    if ( ! inProgress ) {
        alert ("Blur");
        inProgress = false; 
    }
});

Answer 2

您可以跟踪事件的时间戳，并将其用作blur事件处理程序中if语句的条件。您必须稍微延迟if语句，以便可以注册click事件。var inProgress=假//初始化var-oEvent={单击：0，模糊：0}；

$("#search-submit").on("click", function(e) {
    //capture click timestamp
    oEvent[e.type] = e.timeStamp; 
    inProgress = true; 
    alert ("Form Submit");
    inProgress = false; 
});

$("#s").on("blur", function (e) {
    //capture blur timestamp
    oEvent[e.type] = e.timeStamp; 

    //delay this code so click can register
    setTimeout(function() { 

        //check if click happened after blur
        if ( ! inProgress && oEvent.click < oEvent.blur ) { 
            alert ("Blur");
            inProgress = false; 
        }
    }, 500);
});

演示

Answer 3

目标元素上的mousedown事件将在文本框上的blur事件之前调用，因此您可以挂接到该事件中以设置进行中标志。

var inProgress = false; 

$("#search-submit").on("mousedown", function() {
    inProgress = true;
});

$("#search-submit").on("click", function() {
    console.log ("Form Submit");
    inProgress = false;   
});

$("#s").on("blur", function () {
    if ( ! inProgress ) {
        console.log ("Blur");
    }
});

我更新了小提琴：http://jsfiddle.net/405kzboh/2/