当一个不存在时，JavaScript似乎在移动设备上运行“onscroll”事件

My HTML is similar to this:

我的HTML与此类似：

<span id="someDIV"></div>
<div id="anotherDIV"></div>

My JavaScript is similar to this:

我的JavaScript与此类似：

var path = window.location.pathname.toString();
var w;
w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

function someFunction(a, r) {
"use strict";
var someScript = document.createElement("script");
someScript.type = "text/javascript"; someScript.async = true;
someScript.src = "some script src";
document.getElementById("someDIV").parentNode.insertBefore(someScript, document.getElementById("someDIV").nextSibling);
}

function resizeUI() {
"use strict";
if (path !== "/" && path.indexOf("/category/") === -1 && path.indexOf("/label/") === -1 && path.indexOf("/default.aspx") === -1) {
    if (w >= 1305) {
        new someFunction(8, 2);
}}}

(resizeUI)();

window.addEventListener("resize", function () {
"use strict";
w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
resizeUI();
});

Essentially what the someFunction does is load another script that performs an innerHTML that puts content inside of anotherDIV. It puts this script inside of the someDIV span. This script that gets loaded is coded similar to this:

基本上someFunction所做的是加载另一个执行innerHTML的脚本，该内部HTML将内容放在anotherDIV中。它将此脚本放在someDIV范围内。加载的脚本编码类似于：

(function() {document.getElementById('anotherDIV').innerHTML = 'something';})();

All of this code works as expected on desktop and mostly does on mobile as well. My problem comes when I scroll on mobile browsers. This causes the code to repeat and anotherDIV will get another innerHTML performed and the content will change. I know that this happens on Safari on iOS 10.

所有这些代码都在桌面上按预期工作，并且大多数也在移动设备上运行。我在移动浏览器上滚动时遇到了问题。这会导致代码重复，而anotherDIV将执行另一个innerHTML，内容将会更改。我知道这会发生在iOS 10上的Safari上。

This problem makes it so that the original content that is loaded in anotherDIV are not able to be interacted with since it changes nearly every time you scroll through the page and stop; however, there is no onScroll event listener. My JavaScript is located in an external script file loaded before the closing body tag, which is why I don't use any onLoad events.

这个问题使得在anotherDIV中加载的原始内容无法与之交互，因为它几乎每次滚动页面并停止时都会发生变化;但是，没有onScroll事件侦听器。我的JavaScript位于关闭正文标记之前加载的外部脚本文件中，这就是我不使用任何onLoad事件的原因。

1 个解决方案

#1

My solution to this problem was to check the original screen size with the new size since scrolling was causing my resize event listener to fire. I did this like:

我解决这个问题的方法是用新的大小检查原始屏幕大小，因为滚动导致我的resize事件监听器触发。我这样做：

window.addEventListener("resize", function () {
"use strict";
var newWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (newWidth !== width) {width = newWidth; resizeUI(newWidth);}
});

I also added a parameter on the resizeUI function for those wondering about the argument passed in the above code. It seems when using my original HTML/CSS on my website, which had elements I didn't think were causing problems, a resize event was being fired. I haven't pinpointed the exact cause further than that.

我还在resizeUI函数中添加了一个参数，用于那些想知道上面代码中传递的参数的人。似乎在我的网站上使用我的原始HTML / CSS，其中包含我认为不会导致问题的元素时，正在触发调整大小事件。我没有进一步查明确切的原因。