javascript 事件处理程序列表答案

【问题标题】：javascript event handlers listjavascript 事件处理程序列表
【发布时间】：2015-02-26 08:08:49
【问题描述】：

我正在尝试优先考虑点击事件，以防两个事件点击和更改被触发。

我有一个类似于“ValidateOnChange”和“ValidateOnClick”的全局函数来验证文本框在更改和点击事件时的输入。

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

这是模拟代码：

<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 事件似乎是解决方案，但用户不希望在输入时弹出错误。

有没有办法列出所有触发的事件，以便我可以过滤提交按钮的“mousedown”和“mouseup”事件？或者有没有其他方法可以优先考虑点击事件？

【问题讨论】：

如果您使用的是 html5，您可以使用 oninput / input 事件...我不确定您想要进行什么样的验证，因为您的功能似乎没有正在做或验证任何事情。根据验证，可以使用不同的事件处理程序来实现更顺畅的操作。另外，我不明白这是一个与asp.net 相关的问题。
我没有得到你的要求。你能解释一下你想通过上面的代码完成什么吗？
你也可以$('#divError').toggle(input != '0');

标签： javascript jquery asp.net events

【解决方案1】：

根据情况可以有很多选择。我做了一些小的改动以避免双击问题（cmets 修正）。基本上我们需要在按钮对象上绑定 mousedown 事件。在那里，我们将一个临时标志变量设置为 true。同时，如果输入的更改事件被触发，那么您可以跳过检查临时标志变量是否为真。双击触发按钮点击事件的原因在这里更好地解释：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");
    //});
  });

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

【讨论】：