markdown JS回车键重复点击，提交数据

Posted 2021-05-05

### 方法一

>1、当选中确认按钮时，确认Enter键执行按钮的click动作，而不是直接执行click绑定的方法

>2、在触发数据提交方法后禁用按钮，在提交完毕后的回调函数中重新启用

```
function onkeydown() {
    //网页内按下回车触发
    if (event.keyCode == 13) {
        $("#SE1G040_confirm_button").click();
    }
}

or

document.onkeydown = function(event){
  var e = event || window.event; //兼容ie
  switch(e.keyCode) {
    case 13: // enter 键
      $(selector).click();
      break; 
  }
};

this.saveData = function () {
        /// <summary>
        /// 数据提交
        /// </summary>
        //禁用按钮
        $(selector).prop("disabled", true);
        var commitData = {
            data: dataList,
        }
        $.ajax("Controller/SaveData", function (data, message) {
            this.showMessage("数据保存完毕！").done(function () {
                //保存结束后重新启用按钮
                $(selector).prop("disabled", false);
            })
        }, commitData);
    };
```

### 方法二：

>保存一个全局变量，用来记录Button的焦点状态

```
<button onclick="login();" onfocus="window.buttonIsFocused=true;" onblur="window.buttonIsFocused=false;">保存</button>

//在keydown回调中增加校验
document.onkeydown = function(event){
  var e = event || window.event; //兼容ie
  switch(e.keyCode) {
    case 13: // enter 键
      if (!window.buttonIsFocused) this.saveData(); // saveData()是数据保存方法
      break; 
  }
};
```

### 方法三

>为方法执行设置延时

```
var func = $.proxy(this, "saveData"); //或 $.proxy(this.saveData, this);
var node = $("button");
node.bind("keydown", function(event){
  if (event.keyCode == 13) {
      if (!node.hasClass("disabled")) {
          setTimeout(func, 100); //在0.1秒后调用方法
      }
      event.preventDefault();
  }
});
```

>键盘按键都有编码，按键测试

```
document.addEventListener("keydown",keydown);
//键盘监听，注意：在非ie浏览器和非ie内核的浏览器
//参数1：表示事件，keydown:键盘向下按；参数2：表示要触发的事件
function keydown(event){
//表示键盘监听所触发的事件，同时传递传递参数event
    document.write(event.keyCode);//keyCode表示键盘编码
}
```

```
document.addEventListener("keydown",keydown);
//键盘监听，注意：在非ie浏览器和非ie内核的浏览器
//参数1：表示事件，keydown:键盘向下按；参数2：表示要触发的事件
function keydown(event){
    //表示键盘监听所触发的事件，同时传递参数event
    switch(event.keyCode){
        case 37:
            alert("左键");
            break;
        case 39:
            alert("右键");
            break;
    }
}
```

### 方法四

>加一个全局变量

```
this.isExcelOuting = false;
this.saveData = function () {
    /// <summary>
    /// 数据提交
    /// </summary>
    //禁用按钮
    if (!this.isExcelOuting) {
        var commitData = {
            data: dataList,
        }
        $.ajax("Controller/SaveData", function (data, message) {
            this.showMessage("数据保存完毕！").done(function () {
                this.isExcelOuting = false;
            })
        }, commitData);
    }
};
```

### 方法五

>单次绑定



```
$("button").one("click", $.proxy(this.saveData, this)); 
this.saveData = function () {
    /// <summary>
    /// 数据提交
    /// </summary>
    //禁用按钮
    if (!this.isExcelOuting) {
        var commitData = {
            data: dataList,
        }
        $.ajax("Controller/SaveData", function (data, message) {
            this.showMessage("数据保存完毕！").done(function () {
                // 保存完毕后重新绑定
                $("button").one("click", $.proxy(this.saveData, this)); 
            })
        }, commitData);
    }
};

// one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数
// 当使用 one() 方法时，每个元素只能运行一次事件处理器函数
```