无法单击表头标记中的输入字段

Question

我正在使用Datatables和columnsize库来调整列的大小。在列大小库"；mousedown"；在th上防止默认。中ColReorderWithResize插件

$(nTh)
.on( 'mousedown.ColReorder', function (e) {
e.preventDefault();
if (e.which == 1) {
that._fnMouseDown.call( that, e, nTh, i );
}
} )
.on( 'touchstart.ColReorder', function (e) {
that._fnMouseDown.call( that, e, nTh, i );
} );

尽管我在表头输入字段上使用event.stopPropagation((，但它们仍然是不可点击的。不过，我可以在其中浏览并输入文本。是否有一种方法可以在不修改/破坏父库的情况下解决此问题。

JSFiddle将帮助测试该问题。

Answer 1

为了解决您的问题，您需要在单击时.focus((您的输入。因此，您可以编写并应用排序。。。

$("#example > thead > tr > th:first").html("<input type='text' placeholder='Name'>")
var table = $('#example').DataTable({
'ajax': 'https://gyrocode.github.io/files/jquery-datatables/arrays.json',
'dom': 'Rlfrtip',
'colReorder': {
'allowReorder': false
}
});
$("#example > thead > tr > th:first input").on('click', function (e) {
e.stopPropagation();
$(this).focus();
}).on('input', function (e) {
table.column(0).search(this.value, true).draw();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jeffreydwalter/ColReorderWithResize@9ce30c640e394282c9e0df5787d54e5887bc8ecc/ColReorderWithResize.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th class="no-sort">Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>

Answer 2

找到了一个有效的解决方案。由于库事件在mousedown上触发，因此将其添加为输入上的侦听器。

$('input', table.column(colIdx).header()).on('mousedown click', function(e) {
e.stopPropagation();
});

也有click，因为这可以防止它在点击时进行过度排序。然而，我不确定拥有多个侦听器是否会影响具有大量行的页面的性能。