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，我想防止模糊，但是如果从输入字段点击到页面的其他部分，我想允许它。我无法使用按钮提交。

我已经摆弄了小提琴jsfiddle.net/405kzboh/1

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

Answer 1

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

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/

Answer 2

您可以跟踪事件＆＃39; timeStamps并将其用作blur事件处理程序中if语句的条件。而且您必须稍微延迟if语句，以便click事件可以注册。 var inProgress = false; //初始化 var oEvent = {click：0，blur：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);
});

DEMO

Answer 3

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 4

我没有意识到Blur事件会在Click之前触发，因此我需要使用onMousedown事件来捕获Div上的点击。

这里的所有答案都很好，但比它应该更复杂，所以我提出了自己的解决方案：

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

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

Updated Fiddle

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

4 个答案: