检测DIV下的项目

Question

I have a table on a screen on which I overlay a DIV to provide mouse click and move detection in order to resize columns on the table.

I have a column that has tags. What is the best way to reflect mouse change events for items under the DIV? I can get the table item of course, as well as the rows and columns. But how do I allow anchor tags to work as if no DIV is overlayed?

        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将pointer-events: none添加到叠加div的css中，并且所有鼠标事件都将直接从div传递出去，就好像它从未出现过一样。