个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有运行脚本，通过双击将 tr 元素从一个容器移动到另一个容器。但是我有以下提到的问题:
1) 如果我们快速双击元素而不是它移动但它的值没有出现，它会显示空标签。
2)我想在双击时更改背景颜色，当我们点击外部或其他元素时，它的颜色应该被移除。
<script>
$(function () {
function initTabelMgmt() {
selectInvitees();
moveSelectedInvitees();
deleteInvitees();
//scrollOpen();
}
var tmContainer = $("div.cv-tm-body");
var toggleAssignBtn = tmContainer.find('.cv-move-items button');
/*
function scrollOpen() {
var position = $('div.cv-item li.open').first().position();
var offsetTop = $('div.cv-tm-col-r .cv-helper-grid-overflow').scrollTop();
var unitHeight = $('div.cv-item li.open').first().height();
var containerHeight = $('div.cv-tm-col-r .cv-helper-grid-overflow').height();
var scrollAmount = offsetTop + position.top;
if ((offsetTop - position.top) <= 0 && (offsetTop - position.top) >= (-containerHeight + unitHeight)) {
//do nothing
} else {
$('div.cv-tm-col-r .cv-helper-grid-overflow').animate({
scrollTop: scrollAmount
});
}
};
*/
// scrollOpen end
function selectInvitees() {
//select items from invitee list
var startIndex, endIndex;
var dbclick = false;
tmContainer.find("table.cv-invitees").on('click', 'tr', function (e) {
var row = $(this);
setTimeout(function () {
//singleclick functionality start.
if (dbclick == false) {
if (!row.is('.assigned')) {
toggleAssignBtn.removeClass('is-disabled');
if (e.shiftKey) {
row.parents('.cv-invitees').find('tr').removeClass('selected');
endIndex = row.parents('.cv-invitees').find('tr').index(this);
var range = row.closest('table').find('tr').slice(Math.min(startIndex, endIndex), Math.max(startIndex, endIndex) + 1).not('.assigned');
range.addClass('selected');
} else if (e.ctrlKey) {
startIndex = row.parents('.cv-invitees').find('tr').index(this);
row.toggleClass('selected');
} else {
startIndex = row.parents('.cv-invitees').find('tr').index(this);
row.parents('.cv-invitees').find('tr').not(this).removeClass('selected');
row.toggleClass('selected');
}
}
}
}, 200)
})
.dblclick(function () {
dbclick = true
//doubleclick functionality start.
toggleAssignBtn.addClass('is-disabled');
function moveSelectedInviteesDBClick() {
var row = tmContainer.find("table.cv-invitees tr.selected");
if (!row.is('.assigned')) {
var allOpenSeat = $('.cv-item .open');
var numberOpen = allOpenSeat.length;
var name = row.find("td").eq(0).text();;
var company = row.find("td").eq(1).text();
var addedInvitees = [];
allOpenSeat.each(function (index) {
if (index < 1) {
var openSeat = $(this);
openSeat.find('.name').text(name);
if (company != '') {
openSeat.find('.company').addClass('show').text(company);
}
var seatAssignment = new Object();
seatAssignment.company = "";
addedInvitees.push(seatAssignment);
openSeat.removeClass('open');
}
row.remove();
});
}
} // moveSelectedInviteesDBClick
moveSelectedInviteesDBClick();
setTimeout(function () {
dbclick = false
}, 300)
});
} // selectInvitees end
function moveSelectedInvitees() {
//move invitees from left to right
tmContainer.find('button.cvf-moveright').click(function () {
var selectedItem = $('.cv-invitees .selected');
var allOpenSeat = $('.cv-item .open');
var numberSelected = selectedItem.length;
var numberOpen = allOpenSeat.length;
var errorMsg = tmContainer.prev('.cv-alert-error');
if (numberSelected > numberOpen) {
errorMsg.removeClass('is-hidden');
} else {
var name;
var company;
var invitee = [];
var selectedInvitees = [];
var count = 0;
selectedItem.each(function () {
var $this = $(this);
name = $this.find("td").eq(0).text();
company = $this.find("td").eq(1).text();
invitee = [name, company];
selectedInvitees.push(invitee);
count = count + 1;
i = 0;
$this.remove();
});
var addedInvitees = [];
var items = $('div.cv-item li');
var seatItems = $('div.cv-order li');
allOpenSeat.each(function (index) {
if (index < count) {
var openSeat = $(this);
openSeat.find('.name').text(selectedInvitees[index][0]);
if (selectedInvitees[index][1] != '') {
openSeat.find('.company').addClass('show').text(selectedInvitees[index][1]);
}
var seatAssignment = new Object();
seatAssignment.company = "";
addedInvitees.push(seatAssignment);
//selectedInvitees.shift();
openSeat.removeClass('open');
}
});
selectedInvitees = [];
}
toggleAssignBtn.addClass('is-disabled');
});
} // moveSelectedInvitees end
function deleteInvitees() {
//move invitees from left to right
tmContainer.find('div.cv-tm-col-r .cv-icon-remove').click(function () {
//delete seat assignment
var icon = $(this);
var idx = $('.ui-sortable li').index(icon.parent());
icon.parent().fadeTo(0, 0).addClass('open').find('.name').text('Open').end().fadeTo(750, 1);
icon.parent().find('.company').removeClass('show').text('');
// icon.parent().find('.entitystub').text('00000000-0000-0000-0000-000000000000');
// icon.parent().find('.entitytype').text('0');
// icon.parent().find('.pipe').remove();
// icon.hide();
// var testSeat = $('.seat-numbers li').get(idx);
//var seatStub = j$.trim(j$(testSeat).find('.seatstub').text());
//var input = { 'seatStub': seatStub };
//AssignSeats(input, "/Subscribers/WS/SeatAssignmentService.asmx/DeleteRegistrant");
});
}
initTabelMgmt();
}); // document.ready end
</script>
最佳答案
您的代码看起来很不错。您还应该使用 native 方法 .click(...) 从 jQuery 注册单击事件。所以请更改以下行
tmContainer.find("table.cv-invitees").on('click', 'tr', function (e) {
收件人:
tmContainer.find("table.cv-invitees").click(function (e) {
一切都应该工作正常。由于一些奇怪的原因，函数
$("#someelement").on("click", ...);
并不总是有效，只是有时有效。由于这种奇怪的行为，JQuery 官方建议您对预定义事件(例如 onclick、onkeyup、onchange 等)使用 native 函数。
编辑:如果 dblick 现在不工作，请制作 2 行，如下所示:
tmContainer.find("table.cv-invitees").click(function (e) {
// [...]
;
tmContainer.find("table.cv-invitees").dbclick(function (e) {
// [...]
编辑2:如果它也不起作用，那么请在您处于 .click() 闭包时移除单击事件监听器。因为如果发生这种情况，jQuery 的行为是始终将其视为单击。所以，换句话说，dblick() 将永远不会被触发，因为 .click() 总是会在之前发生。然后 jQuery 不会计算最多 2 次快速点击。期待意外^^
Edit3:这是完整的代码，希望它现在可以正常工作:
$(function ()
{
function initTabelMgmt()
{
selectInvitees();
moveSelectedInvitees();
deleteInvitees();
//scrollOpen();
}
var tmContainer = $("div.cv-tm-body");
var toggleAssignBtn = tmContainer.find('.cv-move-items button');
var iClickCounter = 0;
var dtFirstClick, dtSecondClick;
/*
function scrollOpen() {
var position = $('div.cv-item li.open').first().position();
var offsetTop = $('div.cv-tm-col-r .cv-helper-grid-overflow').scrollTop();
var unitHeight = $('div.cv-item li.open').first().height();
var containerHeight = $('div.cv-tm-col-r .cv-helper-grid-overflow').height();
var scrollAmount = offsetTop + position.top;
if ((offsetTop - position.top) <= 0 && (offsetTop - position.top) >= (-containerHeight + unitHeight)) {
//do nothing
} else {
$('div.cv-tm-col-r .cv-helper-grid-overflow').animate({
scrollTop: scrollAmount
});
}
};
*/
// scrollOpen end
function selectInvitees()
{
//select items from invitee list
var startIndex, endIndex;
var dbclick = false;
tmContainer.find("table.cv-invitees").click(function(e)
{
iClickCounter++;
if (iClickCounter === 1)
{
dtFirstClick = new Date();
var row = $(this);
window.setTimeout(function ()
{
//singleclick functionality start.
if (dbclick == false)
{
if (!row.is('.assigned'))
{
toggleAssignBtn.removeClass('is-disabled');
if (e.shiftKey)
{
row.parents('.cv-invitees').find('tr').removeClass('selected');
endIndex = row.parents('.cv-invitees').find('tr').index(this);
var range = row.closest('table').find('tr').slice(Math.min(startIndex, endIndex), Math.max(startIndex, endIndex) + 1).not('.assigned');
range.addClass('selected');
}
else if (e.ctrlKey)
{
startIndex = row.parents('.cv-invitees').find('tr').index(this);
row.toggleClass('selected');
}
else
{
startIndex = row.parents('.cv-invitees').find('tr').index(this);
row.parents('.cv-invitees').find('tr').not(this).removeClass('selected');
row.toggleClass('selected');
}
}
}
},
200);
}
else if (iClickCounter === 2)
{
dtSecondClick = new Date();
}
else if (iClickCounter === 3)
{
if (dtSecondClick.getTime() - dtFirstClick.getTime() < 1000)
{
return;
}
iClickCounter = 0;
dbclick = true
//doubleclick functionality start.
toggleAssignBtn.addClass('is-disabled');
function moveSelectedInviteesDBClick()
{
var row = tmContainer.find("table.cv-invitees tr.selected");
if (!row.is('.assigned'))
{
var allOpenSeat = $('.cv-item .open');
var numberOpen = allOpenSeat.length;
var name = row.find("td").eq(0).text();;
var company = row.find("td").eq(1).text();
var addedInvitees = [];
allOpenSeat.each(function (index)
{
if (index < 1)
{
var openSeat = $(this);
openSeat.find('.name').text(name);
if (company != '') {
openSeat.find('.company').addClass('show').text(company);
}
var seatAssignment = new Object();
seatAssignment.company = "";
addedInvitees.push(seatAssignment);
openSeat.removeClass('open');
}
row.remove();
}
);
}
}
// moveSelectedInviteesDBClick
moveSelectedInviteesDBClick();
window.setTimeout(function ()
{
dbclick = false
}, 300);
}
}
);
} // selectInvitees end
function moveSelectedInvitees()
{
//move invitees from left to right
tmContainer.find('button.cvf-moveright').click(function ()
{
var selectedItem = $('.cv-invitees .selected');
var allOpenSeat = $('.cv-item .open');
var numberSelected = selectedItem.length;
var numberOpen = allOpenSeat.length;
var errorMsg = tmContainer.prev('.cv-alert-error');
if (numberSelected > numberOpen) {
errorMsg.removeClass('is-hidden');
}
else
{
var name;
var company;
var invitee = [];
var selectedInvitees = [];
var count = 0;
selectedItem.each(function () {
var $this = $(this);
name = $this.find("td").eq(0).text();
company = $this.find("td").eq(1).text();
invitee = [name, company];
selectedInvitees.push(invitee);
count = count + 1;
i = 0;
$this.remove();
});
var addedInvitees = [];
var items = $('div.cv-item li');
var seatItems = $('div.cv-order li');
allOpenSeat.each(function (index)
{
if (index < count)
{
var openSeat = $(this);
openSeat.find('.name').text(selectedInvitees[index][0]);
if (selectedInvitees[index][1] != '')
{
openSeat.find('.company').addClass('show').text(selectedInvitees[index][1]);
}
var seatAssignment = new Object();
seatAssignment.company = "";
addedInvitees.push(seatAssignment);
//selectedInvitees.shift();
openSeat.removeClass('open');
}
}
);
selectedInvitees = [];
}
toggleAssignBtn.addClass('is-disabled');
}
);
} // moveSelectedInvitees end
function deleteInvitees()
{
//move invitees from left to right
tmContainer.find('div.cv-tm-col-r .cv-icon-remove').click(function ()
{
//delete seat assignment
var icon = $(this);
var idx = $('.ui-sortable li').index(icon.parent());
icon.parent().fadeTo(0, 0).addClass('open').find('.name').text('Open').end().fadeTo(750, 1);
icon.parent().find('.company').removeClass('show').text('');
// icon.parent().find('.entitystub').text('00000000-0000-0000-0000-000000000000');
// icon.parent().find('.entitytype').text('0');
// icon.parent().find('.pipe').remove();
// icon.hide();
// var testSeat = $('.seat-numbers li').get(idx);
//var seatStub = j$.trim(j$(testSeat).find('.seatstub').text());
//var input = { 'seatStub': seatStub };
//AssignSeats(input, "/Subscribers/WS/SeatAssignmentService.asmx/DeleteRegistrant");
}
);
}
initTabelMgmt();
}
); // document.ready end
我猜你在你的特殊情况下将双击解释为在同一个表条目上单击了 3 次。如果用户这样做并且第一次和第二次点击之间的时间差超过一秒，则会触发双击。我认为应该是处理这种特殊情况的解决方案。
编辑 4:请测试，是否可以单击 3 个不同的表格列并同时触发双击。我认为这对我的代码处理双击的方式不利。因此，您需要知道您已经从哪个表格列设置了 1 到 3 次点击。我们应该怎么做？基本上，有 3 种可能性可以做到这一点:
所有这些可能的选项都需要环绕您的点击事件，例如。 G。一个循环，遍历给定表中的所有 tr 元素。您已经通过调用 jQuery 函数 .find(..) 部分地完成了这项工作。这会在每个找到的 html 元素上执行闭包。因此，在您的情况下，搜索表中的所有 tr 元素。但是您需要做的是解决我上面给出的选项之一。
关于javascript - 双击元素的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21163009/
25
4
0
我在很多论坛和问题上搜索，但似乎没有人问如何在 Angular/ionic 2 中双击或双击？ 在 ionic v1 中，它可以通过 双击 使用(参见 http://ionicframework.co
我有一个 GridView，我想在其中检测列表中项目的双击事件，我按如下方式执行:
我试图让我的程序识别 NSCollectionView 的双击。我尝试遵循本指南:http://www.springenwerk.com/2009/12/double-click-and-nscoll
我正在使用依赖属性来显示一个窗口，双击一个项目。 不确定这是 WPF 的特定错误还是我做错了什么。 如果我双击滚动条或列标题。它会触发双击命令。 在 ths 链接上尝试了解决方案 WPF ListVi
我只是想让我的 uitextview 在用户双击它时可编辑。 但在我的代码中它只能工作一次。隐藏键盘后双击停止像我想要的那样工作。它只显示“复制并定义”弹出窗口，如果我第二次尝试...... 也许“t
对于学校项目，我必须在 JList 上使用 ListSelectionListener(LSL)。我知道 LSL 会响应鼠标单击和鼠标释放。但对于该项目，我必须让它响应双击。有没有办法让 LSL 对此
当尝试通过双击从列表中选择项目时，它会为两个列表选择一次，但在单击选择后!!! listScrollPanel.setViewportView(categoryList); subCa
我读过这个How to distinguish between mouseReleaseEvent and mousedoubleClickEvent on QGrapnhicsScene还有这个Di
我有两个列表与 jQuery UI 中的connectedSortable 连接，但我想添加一个功能，能够双击一个项目并将其移动到另一个列表，但我真的不知道如何去做。 最佳答案 $j('#list
我正在使用 DevExpress xtraScheduler 10.2 如何处理 xtraScheduler 中的双击事件(仅在约会而非单元格上)？ 我不想显示任何 appointmentedit 表
在这方面遇到了一些麻烦。所以我的公司想要应用程序的左抽屉菜单。具体来说，菜单的控件也附加在每一行中。即每一行都有单独的订单号和附加的操作按钮。单击“操作”按钮时，抽屉会打开以执行各种操作。现在的问题是
我尝试打开一个 UIAlertView，其中有两个 textfield 以及我选择的单元格中的文本。我使用这段代码: -(void)tableView:(UITableView *)tableView
以下是我的代码；我没有被 didDoubleTapMap 解雇。 UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc]
所以我有一个表单，双击一个字段会弹出一个自定义模式窗口。模态窗口上的“保存”和“取消”按钮具有调用模态窗口层上的hide() 的“单击”事件。然而，我们的一些用户自然会双击东西。双击保存或取消按钮会触
我正在为 Google 地球开发此解决方案。我有一个标题，其中包含使用 CSS 创建的按钮，单击这些按钮会触发 KML 的加载。我遇到的问题是，如果用户再次单击该按钮，它会再次加载相同的 KML。我需
当我双击 ListView 项目时，我收到了 DoubleTapped 事件。 但我不确定如何获取执行点击的所选项目。ListView.Selecteditem 没有给我点击的项目。 请帮忙。 最佳答
我目前有一个 UISwitch，它在打开和关闭时分别递增和递减一个计数器。 当计数器为 0 时，计数器不会递减。从功能上讲，这工作得很好，但是我注意到一个错误，想知道是否有人遇到过这个问题。 本质上，
我试图找出如何处理鼠标左键(或任何)双击。但是我找不到任何关于它的信息。 有人能帮帮我吗？我不想编写自己的双击处理程序。 GLFW_REPEAT 不适用于鼠标按钮。 最佳答案 编写自己的双击处理程序有
我想使用 GestureDetector 的 tap 方法检测 libgdx 中的双击。手势监听类。过去两天我在网上搜索过，但找不到如何操作的示例。我知道该方法有一个“计数”变量，但我不知道如何使用它
如何识别 UIButton 上的双击？ 最佳答案 为控件事件UIControlEventTouchDownRepeat添加一个target-action，只有当touch的tapCount为2时才做a
我是一名优秀的程序员,十分优秀！