【发布时间】：2020-04-20 14:39:34
【问题描述】：
以下是我在 HTML 中使用 JQuery 实现的场景
- 当用户双击表格单元格时，里面应该有一个新的输入 双击单元格 [完成]
- 当用户 KeyPress [Tab] 并且它应该移动到下一个单元格 [Done] 时
在 2 场景的情况下，我需要在下一个 Cell 上触发 dblclick() 事件，该事件在其中创建输入元素，但它无法在输入元素内聚焦。
我已尝试调试该场景，但无法理解它发生的原因。
我创建了一个按钮并编写了触发 dblclick() 的点击函数，然后在输入元素内设置焦点。
我无法理解当用户使用鼠标单击/click() 时为什么将焦点设置在创建的输入元素上但为什么当我使用dblclick() 从代码触发双击时没有发生同样的情况/p>
以下是相同的代码：
//Global Variables
var TabEdit_sourceInput = null;
var TabEdit_currentTd = null;
var TabEdit_DOMtocheck = null;
var TabEdit_previousHour = null;
var gridRefreshFlag = false;
//Init Double Click Event on the Table TD
$('.custom-table-td').dblclick(function(event){
var tableId = $(this).attr('id');
var inputId = 'input-'+tableId;
$(this).html('<input id="input-'+tableId+'" placeholder="Type Message" class="form-control" onkeydown="return initCheckKeypress();" tabindex="1"/>');
//Focusing on Generated Event
$('#'+inputId).focus();
//Binding the Focus Out Event to
$('#'+inputId).focusout(function(){
debugger;
$('.header').html($(this).val());
});
});
//Click Event to trigger dblclick on td with id = 'tableData1'
$('.btn-trigger-dbclick').click(function(){
$('#tableData1').dblclick();
});
//Function to check Tab is Press or not
function initCheckKeypress(evt) {
"use strict";
var e = event || evt; // for trans-browser compatibility
var charCode = e.which || e.keyCode;
if (charCode === 9) {
gridRefreshFlag = true;
TabEdit_sourceInput = $(e.target);
TabEdit_currentTd = TabEdit_sourceInput.parent();
TabEdit_DOMtocheck = TabEdit_currentTd.next('td');
movetoNextTD();
}
}
//Code to Click on Next Cell
function movetoNextTD() {
if (gridRefreshFlag && TabEdit_DOMtocheck !== null) {
TabEdit_currentTd.html("");
TabEdit_DOMtocheck.dblclick();
resetmovetoNextVariable();
}
}
//Reset Global Variable
function resetmovetoNextVariable(){
TabEdit_sourceInput = null;
TabEdit_currentTd = null;
TabEdit_DOMtocheck = null;
TabEdit_previousHour = null;
gridRefreshFlag = false;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Focus Issue</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" >
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="header"></div>
<table class="table table-bordered">
<tbody>
<tr id="tableRow1">
<th id="tableHeader1" class="custom-table-th">TH 1</th>
<th id="tableHeader2" class="custom-table-th">TH 2</th>
<th id="tableHeader3" class="custom-table-th">TH 3</th>
</tr>
<tr id="tableRow2">
<td id="tableData1" class="custom-table-td"></td>
<td id="tableData2" class="custom-table-td"></td>
<td id="tableData3" class="custom-table-td"></td>
</tr>
</tbody>
</table>
<button class="btn btn-primary btn-trigger-dbclick">Trigger</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>【问题讨论】：
标签： javascript jquery focus event-bubbling event-capturing