javascript - ontouchstart 无法在移动设备上运行？

Question

我想用 JavaScript 在触摸设备上复制悬停效果。我创建了 2 个事件 ontouchstart 和 ontouchend，但由于某种原因它不起作用，我收到控制台错误。

错误:未捕获的 DOMException:无法在“文档”上执行“querySelector”:“[object HTMLDivElement]”不是有效的选择器。

我的代码:

(() => {
    const hero = document.getElementById('hero');

    if (!hero) {
        return;
    }

    const shuffle = array => {
        let currentIndex = array.length;
        let temporaryValue, randomIndex;

        while (0 !== currentIndex) {
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;

            // And swap it with the current element.
            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
        }

        return array;
    };

    const images = Array.from(Array(16).keys(), n => n + 1);
    const shuffleArray = shuffle(images);

    const init = () => {
        shuffleArray.forEach(image => {
            let imageDiv = document.createElement('div');
            imageDiv.className = `bg-image bg-image-bg${image}`;
            hero.appendChild(imageDiv);

            document.querySelector(imageDiv).ontouchstart = function () {
                imageDiv.style.opacity = 1;
            }

            document.querySelector(imageDiv).ontouchend = function () {
                imageDiv.style.opacity = 0;
            }
        });
    };

    window.addEventListener('load', init);
})();

有人可以帮忙吗？提前致谢!

Answer 1

这应该只是 imageDiv.ontouchstart =，而不是 document.querySelector(imageDiv).ontouchstart =。您无需查找刚刚通过 querySelector 创建的 div。您只需按原样使用该 div 对象即可。此外，querySelector 只接受字符串作为参数，而不接受元素对象。

更好的方法是这样做:

imageDiv.addEventListener('touchstart', your_function_here)

PS:我什至不确定 imageDiv.ontouchstart 是否有效，而不是使用 addEventListener。