0

当浏览器的屏幕宽度发生变化时，我会使用 TouchEvents 并使用窗口对象的 matchMedia 方法来实现这一点。这是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .text {
            font-size: 32px;
            font-weight: 700;
            opacity: 0;
            text-align: center;
            transition: opacity .4s ease;
        }

        .text.show {
            opacity: 1;
        }
    </style>
</head>
<body>
    <p class="text">Hello, World! : )</p>
    <button>CLICK ME</button>
</body>
</html>

const text = document.querySelector('.text');
const btn = document.getElementsByTagName('button')[0];
const mq = window.matchMedia('(min-width: 375px) and (max-width: 800px)');

        function showText(event) {
            btn.addEventListener(event, () => {
                console.log('event ', event);
                text.classList.toggle('show');
            });
        }

        console.log('MediaQueryList ', mq);

        mq.matches ? showText('touchstart') : showText('click');

问题是当我调整浏览器宽度时，它仍然是要触发的 click 事件，而不是 touchstart 事件。这是为什么？

4

0 回答 0