执行按钮单击功能时,Web应用程序会冻结,但仅限于Safari

时间:2017-04-28 09:06:52

标签: javascript html safari

这让我在过去的一天半里难过。我正在运行一个功能来突出显示gridview中的单元格。当我单击某个范围以关闭该功能时,整个页面会冻结。这不会发生在chrome或firefox上。只有Safari。

违规功能是“document.getElementById('markbutton')。onclick”。如果子函数“coordsync”为空,则它有效。如果它有任何东西,即使只是一个“警告(”你好“)”,整个页面在Safari中冻结。令人难以置信的是令人沮丧。

相关代码:

var highlightstate = 0;
document.getElementById('markbutton').onclick = function () {
if (highlightstate == 0) {
    document.getElementById('highlightnotif').style.display = "block";
    document.getElementById('markbutton').style.backgroundColor = "#FFDB4D";
    highlightstate = 1;
}
else if (highlightstate == 1) {
    document.getElementById('highlightnotif').style.display = "none";
    document.getElementById('markbutton').style.backgroundColor = "#FFFFF0";
    highlightstate = 0;
    coordsync();
}

}

function coordsync() {
var txcoords = [];
var selectlist = document.getElementsByClassName("selected");
for (i = 0; i < selectlist.length; i++) {
    var row = selectlist[i].parentNode.rowIndex;
    var column = selectlist[i].cellIndex;
    txcoords.push(row + "," + column);
}
alert(txcoords.join('$'));
}

var table = $("#gridviewSLds tbody");

function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
var txttimelist = document.getElementsByClassName("txttime");
for (i = 0; i < txttimelist.length; i++) {
txttimelist[i].onclick = function (e) {
    hightouchstart(e)
}
txttimelist[i].ontouchmove = function (e) {
    resethighTimer();
    hightouchmove(e)
}
}

function hightouchstart(e) {
if (highlightstate == 1) {
    var cell = e.currentTarget;
    if (hasClass(e.target, 'selected')) {
        cell.classList.remove("selected");
        startCellIndex = cell.index();
        startRowIndex = cell.parent().index();
        removal = 1;
    }
    else {
        cell.classList.add('selected');
        startCellIndex = cell.index();
        startRowIndex = cell.parent().index();
        removal = 0;
    }

    return false;
}
else {
    modaltxttime(e);
}
}

var first = 0;
var hightimermsec = 200;
var highTimer;
function resethighTimer() {
if (highlightstate == 1) {
    clearTimeout(highTimer);
    highTimer = setTimeout(sethightime, hightimermsec);
}
}
var hightime = 1;
function sethightime() {
resethighTimer();
hightime = 1;
dispX = 0;
dispY = 0;
moveselect = 0;
}

var removal = 0;
var dispX = 0;
var dispY = 0;
var moveselect = 0;
function hightouchmove(e) {
if (highlightstate == 1) {
    e.preventDefault();
    var touch = e.touches[0];
    var moveX = touch.clientX - dispX;
    var moveY = touch.clientY - dispY;
    if (moveselect == 0) {
        if (dispX != 0) {
            if (Math.abs(moveY) < 12 * Math.abs(moveX)) {
                var scrollleft = document.getElementById('scrollcontaindiv2').scrollLeft;
                document.getElementById('scrollcontaindiv2').scrollLeft = scrollleft - moveX;
                dispX = touch.clientX;
                dispY = touch.clientY;
                moveselect = 1;
            }
            else {
                var cell = document.elementFromPoint(touch.clientX, touch.clientY);
                if (hightime == 1) {
                    hightime = 0;
                    if (hasClass(cell, 'txttime')) {
                        if (hasClass(e.target, 'selected')) {
                            cell.classList.remove('selected');
                            removal = 1;
                        }
                        else {
                            cell.classList.add('selected');
                            removal = 0;
                        }
                    }
                }
                else {
                    if (hasClass(cell, 'txttime') == true) {
                        if (removal == 0) {
                            cell.classList.add('selected');
                        }
                        else if (removal == 1) {
                            cell.classList.remove("selected");
                        }
                    }
                }
                moveselect = 2;
            }
        }
        else {
            dispX = touch.clientX;
            dispY = touch.clientY;
        }
    }
    else if (moveselect == 1) {
        var scrollleft = document.getElementById('scrollcontaindiv2').scrollLeft;
        document.getElementById('scrollcontaindiv2').scrollLeft = scrollleft - moveX;
        dispX = touch.clientX;
        dispY = touch.clientY;
    }
    else if (moveselect == 2) {
        var cell = document.elementFromPoint(touch.clientX, touch.clientY);
        if (hightime == 1) {
            hightime = 0;
            if (hasClass(cell, 'txttime')) {
                if (hasClass(e.target, 'selected')) {
                    cell.classList.remove('selected');
                    removal = 1;
                }
                else {
                    cell.classList.add('selected');
                    removal = 0;
                }
            }

        }
        else {
            if (hasClass(cell, 'txttime') == true) {
                if (removal == 0) {
                    cell.classList.add('selected');
                }
                else if (removal == 1) {
                    cell.classList.remove("selected");
                }
            }
        }

    }

}

}

1 个答案:

答案 0 :(得分:0)

找到了解决方法。我不知道为什么会这样。但确实如此。 超级奇怪的是,在该函数的底部添加一个警报就会破坏它。

标记按钮功能的相关更改:

document.getElementById('markbutton').onclick = function (e) {
if (highlightstate == 0) {
    document.getElementById('highlightnotif').style.display = "block";
    document.getElementById('markbutton').style.backgroundColor = "#FFDB4D";
    highlightstate = 1;
    var txttimelist = document.getElementsByClassName("txttime");
    for (i = 0; i < txttimelist.length; i++) {
        txttimelist[i].onclick = function highclickev(e) {
            hightouchstart(e);
        }
        txttimelist[i].ontouchmove = function highdragev(e) {
            resethighTimer();
            hightouchmove(e);
        }
    }
}
else if (highlightstate == 1) {
    highlightstate = 0;

    selectlist = document.getElementsByClassName("selected");
    for (i = 0; i < selectlist.length; i++) {
        var row = selectlist[i].parentNode.rowIndex;
        var column = selectlist[i].cellIndex;
        txcoords.push(row + "," + column);
    }
    document.getElementById('highlightnotif').style.display = "none";
    document.getElementById('markbutton').style.backgroundColor = "#FFFFF0";

    txttimelist = document.getElementsByClassName("txttime");
    for (i = 0; i < txttimelist.length; i++) {
        txttimelist[i].removeEventListener('onclick', highclickev);
        txttimelist[i].removeEventListener('ontouchmove', highdragev);
        txttimelist[i].onclick = function regclickev(e) {
            modaltxttime(e);
        }
    }
    txcoords.join('$');
}

}