禁用类似媒体查询的 javascript答案

【问题标题】：disable javascript like media query禁用类似媒体查询的 javascript
【发布时间】：2021-06-17 21:39:12
【问题描述】：

我有一个旋转我的 div 的脚本，但是当我的屏幕小于 600 像素时我想禁用 js，这是旋转 div 的代码：

var form = document.getElementById('survey-form');

form.addEventListener('mousemove', (e) =>{
    var x = (window.innerWidth / 2 - e.pageX) / 200;
    var y = (window.innerHeight / 2 - e.pageY) / 200;

    form.style.transform = 'rotateX(' + x + 'deg) rotateY(' + y + 'deg)'
});

form.addEventListener('mouseleave', function(){
    form.style.transform = 'rotateX(0deg) rotateY(0deg)';
});

我试过了

$(window).resize(function() {
    if ($(window).width()>600){
    var form = document.getElementById('survey-form');

form.addEventListener('mousemove', (e) =>{
    var x = (window.innerWidth / 2 - e.pageX) / 200;
    var y = (window.innerHeight / 2 - e.pageY) / 200;

    form.style.transform = 'rotateX(' + x + 'deg) rotateY(' + y + 'deg)'
});

form.addEventListener('mouseleave', function(){
    form.style.transform = 'rotateX(0deg) rotateY(0deg)';
});
}

但代码只是停止在所有屏幕上运行。

【问题讨论】：

每次调整大小时都会检查宽度并附加一个事件侦听器，该侦听器将在那里执行直到您将其删除。这是第一件事。无论如何，除非您将其删除。在 dom 就绪时添加您的事件侦听器一次，并在回调中检查实际宽度

标签： javascript

【解决方案1】：

它停止是因为您正在检查$(window).width()>600。这意味着如果屏幕宽度大于然后 600px 并且您正在寻找的目标屏幕是 less 然后 600px。所以只需将这个$(window).width() > 600 切换到这个$(window).width() < 600

【讨论】：