Question

我正在尝试优先处理点击事件，以防两个事件点击并触发更改。

我有一个类似于＆＃34; ValidateOnChange＆＃34;的全局函数。和＆＃34; ValidateOnClick＆＃34;在更改和点击事件上验证文本框的输入。

输入一些文字，显示错误信息。然后尝试输入正确的值并单击“提交”按钮，错误消失，这使用户可以单击该按钮两次。在这里，我试图修复此双击。

这是模拟代码：

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  </head>
  <body>
    <div>Enter any string:</div>
    <div><input type="text"  id="txtInput" ></input></div>
    <div id="divError" style="color: red; display: none;">Please enter 0</div>
    <input type="button" value="Submit" id="btnSubmit" ></input>
    <script type="text/javascript">
        var mouseevent_var = null;
        function ValidateOnChange(e) {
            var input = $('#txtInput').val();
            if (input == '0') {
                $('#divError').hide();
            } else {
                $('#divError').show();
            }
        }

        function ValidateOnClick(e){
            alert("Hurray!!! You got it right!");
        }

        $('#txtInput').mousedown(function (e) {
            mouseevent_var = e;
        });

      jQuery(document).ready(function(){
        $('#btnSubmit').click(function(e){
            ValidateOnClick(e);
        });

        $('#txtInput').change(function(e){
            ValidateOnChange(e);
        });

        //User don't want error when they are typing in.
        //$('#txtInput').keyup(function() {
            //$('#txtInput').trigger("change");
        //});
      });
    </script>
  </body>
</html>

keyup事件似乎是解决方案，但用户不希望在输入时弹出错误。

有没有办法列出所有触发事件，以便我可以过滤＆＃34; mousedown＆＃34;和＆＃34; mouseup＆＃34;提交按钮的事件？或者有没有其他方法来确定点击事件的优先顺序？

Answer 1

根据具体情况，可以有很多选择。我做了一些小的改动，以避免双击问题（修改评论）。基本上我们需要在按钮对象上绑定mousedown事件。在那里，我们将临时标志变量设置为true。同时，如果输入的change事件被触发，那么你可以跳过检查临时标志变量是否为真。双击触发按钮点击事件背后的原因可在此处更好地解释：How to get jQuery click event after append in change event handler

您更新的以下js代码：

var mouseevent_var = false;
    function ValidateOnChange(e) {
        // Skip validation if the change event is fired due to user's click on submit button
        if(mouseevent_var){ return false; }

        var input = $('#txtInput').val();
        if (input == 0) {
            $('#divError').hide();
        } else {
            $('#divError').show();
        }
    }

    function ValidateOnClick(e){
        mouseevent_var = false;    // Reset mouseevent_var to false
        alert("Hurray!!! You got it right!");
    }

    $('#btnSubmit').mousedown(function (e) {
        mouseevent_var = true;
    });

  jQuery(document).ready(function(){
    $('#btnSubmit').click(function(e){
        ValidateOnClick(e);
    });

    $('#txtInput').change(function(e){
        ValidateOnChange(e);
    });

    //User don't want error when they are typing in.
    //$('#txtInput').keyup(function() {
        //$('#txtInput').trigger("change");
    //});
  });

以上代码只是根据您的需要进行修复。但也有其他更好的选择。理想情况下，您不应该有两个不同的验证函数来验证不同事件上的相同字段。你必须考虑用一个函数来管理它。

javascript事件处理程序列表

1 个答案: