双击元素时出现问题

时间:2014-01-16 13:22:23

标签: javascript jquery html css jquery-ui

我有运行脚本,双击时将tr元素从一个容器移动到另一个容器。但我有下面提到的问题:

1)如果我们非常快速地双击元素而不是它移动但它的值没有来,它会显示空标记。
2)我想在双击时更改背景颜色,当我们点击外部或其他元素时,颜色应该删除。

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>

1 个答案:

答案 0 :(得分:1)

你的代码看起来很不错。您还应该使用以便从jQuery注册单击事件本机方法.click(...)。所以请更改以下行

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()闭包中时,请删除单击事件监听器。因为如果发生这种情况,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次点击。我们应该怎么做?基本上,有三种可能性:

  1. (仅限HTML5 :)在每个tr上创建数据属性以及此数据属性的值 应该是已经在这个tr上点击的点击。
  2. 定义一个全局对象键/值对对象,它保存 event-ID(但我不知道如何通过jQuery驱动来恢复它 事件)作为密钥和已经完成的点击量 值。然后如果你在下一次点击,你可以决定是什么 现在为这个tr做。这是我最喜欢的选择!
  3. 最后但并非最不重要:只在每个tr和。上注册click事件 为每次点击注册一个自己的全局区域,这样我们就可以了 避免实际问题。你可以这样做e。 G。通过制作JS 将成员变量保存为iclickCounter的对象和您 每次新的点击事件时,都会创建此类的新对象 注册。但是这种替代方案需要更多的代码并且主要是内存占用。
  4. 所有可能的选项都需要包围您的点击事件,例如: G。循环,迭代给定表中的所有tr元素。你通过调用jQuery函数.find(..)已经部分地完成了这个。这会在每个找到的html元素上执行闭包。因此,在您的情况下,搜索表中的所有tr元素。但您需要做的是为上面给出的一个选项做出解决方法。