仅当宽度大于 x 像素时才执行 javascript 代码

Question

我试图仅在宽度大于 1200 像素时才执行 javascript 函数。

我需要执行的代码有效，但屏幕尺寸检查无效：

window.addEventListener("resize", function(){
    if (document.documentElement.clientWidth > 1203) {
            <<<some other code that's working>>>
    }
}, true);

所有这些代码都在 document.ready 函数之外的 javascript 文件中。

编辑：当您拖动屏幕 window 时，它不像正常的 css 查询那样工作。这就是问题。如果您刷新页面，它会起作用，但如果您更改浏览器的宽度，则它不会调整，它需要立即重新加载。

这是我的问题。

Answer 1

问题是 true 您传递给 addEventListener。

请参阅此处的 useCapture 部分：EventTarget.addEventListener

Events which are bubbling upward through the tree will not trigger a listener designated to use capture

所以你想要：

window.addEventListener("resize", function(){
    if (document.documentElement.clientWidth > 1203) {
        <<<some other code that's working>>>
    }
}, false);  <----change here

Answer 2

您可以使用 jQuery 来实现此目的

$( window ).resize(function() {
  console.log($( window ).width());
  var windowwidth = $( window ).width();
  if (windowwidth > 500) {
      console.log("Greater than 500");
     /*Do your work here*/ 
  }
});

Answer 3

您需要添加一个 else 子句才能获得您想要的行为。否则，如您所述，调整大小事件将仅以一种方式起作用。

window.addEventListener("resize", function(){
    // fire when above 1203
    if (document.documentElement.clientWidth > 1203) {
      console.log('Greater!');
    }
    // fire when below 1203
    else {
      console.log('Smaller!');
    }
}, true);

这是 planet260 写的固定 jsfiddle 的 link：http://jsfiddle.net/4dnemh2j/4/

这里又是我的例子：https://jsfiddle.net/9n5hmpua

仅当宽度大于 x 像素时才执行 javascript 代码

Execute javascript code ONLY if width is higher than x pixels

javascript

addeventlistener

media-queries