Question

我在屏幕上有一个表格，我在其上覆盖DIV以提供鼠标点击和移动检测，以便调整桌面上的列。

我有一个包含标签的列。在DIV下反映项目的鼠标更改事件的最佳方法是什么？我当然可以得到表项，以及行和列。但是，如何让锚标签工作，好像没有重叠DIV一样？

        function handleResize(tableId, gripsId) {
        var tbl;
        var grips;
        var clicks = 0, delay = 400;
        var capture;
        var tbl;
        var head;
        var rows;
        var col;
        var posX;
        var offWidth;

        tbl = document.getElementById(tableId);
        grips = document.getElementById(gripsId);

        grips.addEventListener("wheel", function (e) {
            var body = tbl.children[1];
            body.scrollBy(0, e.deltaY);
        });

        grips.addEventListener("mousemove", mouseMove);

        grips.addEventListener("mousedown", function (e) {
            event.preventDefault();
            clicks++;

            setTimeout(function () {
                clicks = 0;
            }, delay);

            head = tbl.children[0].children[0];
            rows = tbl.children[1].children;
            col = parseInt(e.target.className);

            if (e.target.className != '') {
                if (clicks === 2) {
                    var width = head.cells[col].innerText.visualLength() + 20;
                    for (var row = 0; row < rows.length; ++row) {
                        var len = rows[row].innerText.toString().visualLength() + 15;
                        width = Math.max(width, len);
                    }

                    head.cells[col].style.minWidth = head.cells[col].style.maxWidth = width + 'px';
                    for (var row = 0; row < rows.length; ++row) {
                        var style = rows[row].cells[col].style;
                        style.minWidth = style.maxWidth = width + 'px';
                    }

                    recalcDivs(tbl, grips);
                }
                else {
                    posX = event.clientX;

                    offWidth = -$('#' + tableId).scrollLeft();
                    for (var i = 0; i < col; ++i)
                        offWidth += $rootScope.parseWidth(head.cells[i].style.minWidth);

                    capture = e.target;
                    $scope.left = $rootScope.parseWidth(capture.style.left);

                    grips.removeEventListener("mouseup", mouseUp);
                    grips.addEventListener("mouseup", mouseUp);
                }
            }
        });

        function mouseMove(e) {
            if (e.buttons == 0) {
                if ((event.clientY - tbl.getBoundingClientRect().top) < 20)
                    grips.style.cursor = 'pointer';
                else {
                    grips.style.cursor = 'default';

                }
                //grips.style.cursor = ((event.clientY - tbl.getBoundingClientRect().top) < 20) ? 'pointer' : 'default';
            }
            else if (e.buttons == 1) {
                var style = head.cells[col].style;
                $scope.offset = $scope.left - offWidth + (event.clientX - posX);
                style.minWidth = style.maxWidth = $scope.offset + 'px';

                for (var row = 0; row < rows.length; ++row) {
                    var style = rows[row].cells[col].style;
                    style.minWidth = style.maxWidth = $scope.offset + 'px';
                }

                capture.style.left = $scope.offset + 'px';
                tbl.children[1].style.height = screenHeight - rect.top - 80 - ((tbl.scrollWidth > tbl.clientWidth) ? 17 : 0) + "px";
            }
        }

        function mouseUp(e) {
            grips.removeEventListener("mouseup", mouseUp);
            recalcDivs(tbl, grips);
        }

        tbl.onscroll = function () {
            var el = event.target;
            var sel = '#' + el.id + ' > *';
            var els = '#' + el.id;
            $(sel).width($(els).width() + $(els).scrollLeft());

            var grips = document.getElementById(gripsId);
            recalcDivs(tbl, grips);
        };
    }

Answer 1

我所要做的就是将z-index设置为高于重叠div。

Answer 2

尝试将pointer-events: none添加到overlay div的css中，并且所有鼠标事件都会直接通过div，就像它从未出现过一样。

检测DIV下的项目

2 个答案: