javascript - 在元素上,双击双击

  显示原文与译文双语对照的内容

我运行脚本,将 tr 元素从一个容器移动到另一个容器。 但我有的问题

如果我们快速双击元素,但是它的值不来,那么 1 ),它会显示空的标记。
2 ) 我希望在双击时更改 background 颜色,当单击外部或者它的他元素时,该颜色应该删除。

enter image description here


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

时间: 作者:

你的代码看起来不错。 你还应该从jQuery中使用一个单击事件( 本机方法. click(...) ) 为 register 。 因此请更改以下行


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 等等 ) 使用本机函数,因为这种奇怪的行为。

编辑:如果dblick现在不起作用,请按如下所示制作 2行:


tmContainer.find("table.cv-invitees").click(function (e) {
//[...]
;
tmContainer.find("table.cv-invitees").dbclick(function (e) {
//[...]

Edit2: 如果也没有工作,那么请在. click() 闭包中删除单点击事件侦听器。 也就是说,dblick() 永远不会被触发,因为. click() 总是发生在。 期待 unexpected^ ^

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

我想你在特殊情况下解释了一个双击在同一个 table 条目中单击了 3次。 如果用户这样做,并且如果第一次和第二次单击之间的时间差异超过一秒,则双击。 我认为应该是解决这个特殊情况的解决方案。

编辑 4: 如果可以单击 3不同的table 列并获得双击,请进行测试。 我认为这是我的代码如何处理双击的一个缺点。 因此,你需要知道已经设置了 1到 3的table 列。 我们该怎么做? 基本上,有 3种可能的实现方法:

  1. ( HTML5仅:) 在每个 tr 上制作数据属性,该数据属性的值应该是在这里 tr 中单击clicke的。
  2. 然后,如果你在下一次点击,你可以决定现在为这里 tr 做什么。 这是我最喜欢的选择 !
  3. 最后但不是最重要的:只是 register 上的单击事件,并且每个单击注册一个全局区域。 你可以这样做。 通过将一个成员变量作为iclickCounter来保存一个新的对象,每次注册一个新的click事件。 但是这种替代需要更多的代码,而且是 main-memory-hungry 。

所有这些可能的选项需要环绕你的点击事件,例如。 循环,循环遍历给定 table 中的所有 tr 元素。 你已经通过调用jquery函数. find(..) 完成了部分操作。 这将在每个找到的html元素上执行关闭。 因此,在搜索的table 中的所有 tr 元素中。 但是你需要做的是做一个给我的选项的解决方案。

作者:
...