Question

我有一个输入框，我想在失去焦点时保存它的值。

相当简单的东西，我能够通过jQuery的focusout事件完成这项工作。

但问题是，当用户点击＆＃34; X＆＃34;时，我不想触发focusout事件。输入框旁边的图标（示例如下所示）

因此，当用户选中此输入框，或点击框外或点击绿色复选框时，它应触发focusout事件...但如果他们点击红色＆＃34; X＆＃34;，它不应该触发focusout。

这可能与JavaScript / jQuery有关吗？

编辑：

有些人建议使用event.relatedTarget，但似乎返回null。为了清楚起见，我会将我的代码包含在内：

＆＃13;

  // This is the cancel button with the red X
  $("body").on("click", "span[id*='Cancel']", function(e)
  {
    showLabel($(this));
  });

  // this is the code to trigger the blur / focusout event
  // trouble is that the "e.relatedTarget" is null
  $("body").on("focusout", "input, textarea", function (e) {
    if($(e.relatedTarget).is("span[id*='Cancel']")){
      return false;
    }

    $(this).siblings("span[id*='OK']").trigger("click");
    return false;
  });

＆＃13;

这里有一个屏幕抓取我在JS中调试它（你会看到$(e.relatedTarget)选择器什么都不返回）：

Answer 1

您可以取消将焦点返回到上一个元素的de event。

$('#inputText').focusout(function(event) {
  setTimeout(function(){
       if (document.activeElement.id == "btnCancel") {
            $(event.target).focus();
            return false;
       } 
    },1);
});

这个jsFiddle显示了如何做到这一点：https://jsfiddle.net/mpervh3t/

希望有所帮助

Answer 2

您必须使用relatedTarget，如下所示：

$(document).ready(function(){

    $(".btn").on("focusout",function(e){

        if($(e.relatedTarget).hasClass("red")) {
             alert("You clicked on X button");
        }

        else {

            alert("Fire Focus out")
        }

    })
   })

最终代码：

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <style>
            .gr {
                color: green;
            }
            .red {
                color: red;
            }
        </style>
    </head>
    <body>
       <input type="text" class="btn"><button class="gr">Ok</button><button class="red">X</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){

        $(".btn").on("focusout",function(e){

            if($(e.relatedTarget).hasClass("red")) {
                 alert("You clicked on X button");
            }

            else {

                alert("Fire Focus out")
            }

        })
    })
    </script>
    </body>  
</html>

＆＃13;

Answer 3

根据我的评论：

＆＃34;我不得不用模糊事件做类似的事情。基本上我要做的就是在模糊上调用setTimeout来执行我的函数来保存数据，然后在X的click事件上取消超时。这样，除非单击X，否则将触发保存功能。延迟也是非常可以忽略的。＆＃34;

我找到了相关的代码

var sliderTimeout = null;
$(".slider-trigger").on("blur", function () {
      sliderTimeout = setTimeout(function () {
          $(".slider").hide();
      }, 100);
  });

$(".ui-slider-handle").on("focus", function () {
      clearTimeout(sliderTimeout);
});

以下是代码的full demo。它不仅仅证明了这一点，而且如果你在边缘检查聚焦/模糊的行为＆＃34;输入时，您会看到如果模糊边距输入，滑块会隐藏，但如果您单击滑块，它会取消隐藏并保持显示。它是完全相同的概念，只是一个稍微不同的应用程序。

Answer 4

在这里，我做了那件事。

https://jsfiddle.net/kowmLf2a/1/

在模糊事件中，我定位相关目标。看看相关目标是否是我不想模糊的项目。如果是，则返回false。

参考代码：

$('#input').blur(function(event){
  if($(event.relatedTarget).is('#bt2')){
    return false;
  }

  alert($(this).val());
});

你能否在失去焦点时停止jQuery焦点的射击？

4 个答案: