执行鼠标时检测目标父元素"onwheel Event"

Question

这段代码应该做的是：

我有一个元素 ID 列表，每个目标元素都包含其他元素。当我使用鼠标滚轮并且光标位于目标元素之一（或其某些子元素）上时，必须执行一些操作。

我写了这段代码，它运行良好。让我担心的是，每次代码都必须执行许多计算才能完成任务。如果有人知道我如何优化这项任务，我会很乐意分享。提前致谢。

请运行整页上的代码片段

var flag = true;
var myTarget;
var myRes;
var myI;

// The IDs of the target elements
var array = ['elOne', 'elTwo', 'elThree'];
var newArray = array.reverse();

for (var i = 0; i < array.length; i++) {
    var myEl = document.getElementById(array[i]);
    myEl.parentElement.addEventListener("wheel", event => {
        mouseWeel(event.target);
    });
}

function mouseWeel(cmp) {
    if (cmp !== myTarget) {
        for (var i = 0; i < newArray.length; i++) {
            var res = cmp.closest('#' + newArray[i]);
            if (res) { break; }
        }

        myTarget = cmp;
        myRes = res;
        myI = i;
    }

    cmd = myTarget; res = myRes; i = myI;

    if (flag) {
        var myEl = document.getElementById(newArray[i]);
        myEl.appendChild(document.createTextNode(i));
        flag = false;
    } else {
        flag = true;
    }
}

<div id="elOne" style="width:100%; height:90vh; background:orangered;">
    <div id="elTwo" style="width:50%; height:45%; background:orange; margin: auto;">
        <div style="width:80%; height:50%; background:orange; padding: 10px;">
            <h2>Lorem ipsum</h2>
            <span>Lorem ipsum dolor sit amet consectetur.</span>
        </div>
    </div>

    <div id="elThree" style="width:50%; height:45%; background:blue; margin: auto;">
        <div style="width:80%; height:50%; background:blue; padding: 10px;">
            <h2>Lorem ipsum</h2>
            <span>Lorem ipsum dolor sit amet consectetur</span>
            <div
                style="width: 150px; height: 150px; margin-left: -200px; background:blue; padding: 20px; transform: rotate(-45deg); opacity: 0.5; color: white;">
                I am a child of the blue element
            </div>
        </div>
    </div>
</div>

Answer 1

您需要查看某种节流阀或去抖动。

https://programmingwithmosh.com/javascript/javascript-throttle-and-debounce-patterns/

执行鼠标时检测目标父元素"onwheel Event"

Detect the target parent element when perform mouse "onwheel Event"

html

javascript

mousewheel