javascript事件处理程序列表

javascript event handlers list

本文关键字：列表 程序 事件处理 javascript      更新时间：2024-06-17

我正在尝试确定点击事件的优先级，以防触发两个事件点击和更改。

我有一个类似于"ValidateOnChange"answers"ValidateOn click"的全局函数，用于验证更改和点击事件时文本框的输入。

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

这是实物模型代码：

<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>

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

有没有办法列出所有触发的事件，这样我就可以为提交按钮过滤"mousedown"answers"mouseup"事件？或者有没有其他方法可以优先处理点击事件？

根据具体情况，可以有许多替代方案。为了避免双击问题，我做了一些小改动（修改了评论）。基本上，我们需要将mousedown事件绑定到按钮对象上。在那里，我们将把一个临时标志变量设置为true。同时，如果输入的更改事件被触发，则可以跳过检查临时标志变量是否为true。这里可以更好地解释双击触发按钮点击事件的原因：如何在更改事件处理程序中附加jQuery点击事件

您更新的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");
    //});
  });

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

相关文章：