执行鼠标“onwheel事件”时检测目标父元素

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/