Javascript 不适用于特定 iPhone iOS 版本

[ad_1]

我的网页上有 javascript 代码，它适用于桌面、android、
然而，它不适用于某些iPhone，我的代码的每个部分，输入事件，点击事件

适用于此 iPhone 型号和版本：

1. iPhone 13 Safari 16.6版本

2.iPhone 12 Safari 16.6版本

3.iPhone 13 Safari 版本16.5.1

4. iPhone 11 Safari 16.5版本

但我的代码不适用于这种类型的 iPhone：

1.iPhone 11 Safari 16.1版本

2.iPhone 11 Safari版本16.3.1

3.Iphone XS Max safari版本16.5.1

4.Iphone Xr safari版本16.5.1

5.iPhone XR safari版本16.3.1

**这是我的代码：**

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    const header = document.querySelector(".header");
    const langSelect = document.querySelector("#lang_select");
    const langList = document.querySelector(".lang_list");

    header.addEventListener("click", function(event) {
      langList.style.display = langList.style.display === "none" ? "block" : "none";
      event.stopPropagation();
    });

    document.addEventListener("click", function(event) {
      if (!langSelect.contains(event.target)) {
        langList.style.display = "none";
      }
    });

    const fieldInputs = document.querySelectorAll(".field input");

fieldInputs.forEach(function(input) {
  input.addEventListener("focus", function() {
    this.parentElement.classList.add("active");
  });

  input.addEventListener("blur", function() {
    if (this.value === "") {
      this.parentElement.classList.remove("active");
    }
  });
});

let isFirstOpen = false;
  const firstBtn = document.querySelector("#firstBtn");
  const firstDrop = document.querySelector("#firstDrop");

  firstBtn.addEventListener("click", function(event) {
    isFirstOpen = !isFirstOpen;

    if (isFirstOpen) {
      firstDrop.style.display = "block";
    } else {
      firstDrop.style.display = "none";
    }

    event.stopPropagation();
  });

  document.addEventListener("click", function(event) {
  if (
    !event.target.closest("#firstBtn") &&
    !event.target.closest("#firstDrop")
  ) {
    const firstDropElement = document.querySelector("#firstDrop");
    if (firstDropElement.style.display !== "none") {
      firstDropElement.style.display = "none";
      isFirstOpen = false;
    }
  }
});

  



 

      

  document.querySelector("#firstInput input").addEventListener("input", function() {
  const inputVal = this.value;
  let num = inputVal.replace(/[^0-9.]+/g, "");
  let regex = /^[+-]?(\d*\.\d+|\d+\.\d*)([eE][+-]?\d+)?$/;

  if (!regex.test(num)) {
    if (num === ".") {
      num = "";
    } else {
      num = num.replace(/(?<=\..*)\./, "");
    }
  }

  this.value = num;

  const firstCryptoCurrencySymbol = document.querySelector("#currency1 a").dataset.cur;
  const secondCryptoCurrencySymbol = document.querySelector("#currency2 a").dataset.cur;

  fetch("/calculateExchangeRate", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      firstCryptoCurrencySymbol: firstCryptoCurrencySymbol,
      secondCryptoCurrencySymbol: secondCryptoCurrencySymbol
    })
  })
  .then(res => res.json())
  .then(data => {
    const exchangeRate = data.rate;
    document.querySelector("#secondInput input").value = num * exchangeRate;
  });
});



document.querySelector("#secondInput input").addEventListener("input", function() {
  const inputVal = this.value;
  let num = inputVal.replace(/[^0-9.]+/g, "");
  let regex = /^[+-]?(\d*\.\d+|\d+\.\d*)([eE][+-]?\d+)?$/;

  if (!regex.test(num)) {
    if (num === ".") {
      num = "";
    } else {
      num = num.replace(/(?<=\..*)\./, "");
    }
  }

  this.value = num;

  const firstCryptoCurrencySymbol = document.querySelector("#currency1 a").dataset.cur;
  const secondCryptoCurrencySymbol = document.querySelector("#currency2 a").dataset.cur;

  fetch("/calculateExchangeRate", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      firstCryptoCurrencySymbol: firstCryptoCurrencySymbol,
      secondCryptoCurrencySymbol: secondCryptoCurrencySymbol
    })
  })
    .then(res => res.json())
    .then(data => {
      const exchangeRate = data.rate;
      document.querySelector("#firstInput input").value = num / exchangeRate;
    });
});




         
const optionElements = document.querySelectorAll(".option");

optionElements.forEach(function(option) {
  option.addEventListener("click", function(event) {
    if ('ontouchstart' in window || navigator.maxTouchPoints) {
      event.preventDefault();
    }

    let dataCur = this.dataset.cur;
    let imageUrl = this.querySelector(".pm_select_img img").src;
    let optionText = this.querySelector("span").textContent;

    document.querySelector("#firstBtn .pm_select_img img").src = imageUrl;
    document.querySelector("#firstBtn span").textContent = optionText;
    document.querySelector("#firstBtn").dataset.cur = dataCur;

    document.querySelector("#currency1 .pm_select_child").dataset.cur = dataCur;
    document.querySelector("#currency1 .pm_select_child").textContent = dataCur;

    document.querySelector("#hiddenInput").value = dataCur;

    document.querySelector("#amount_send1").dataset.cur = dataCur;
    document.querySelector("#amount_send1 ~ .addons").textContent = dataCur;

    const secondDataCur = document.querySelector("#currency2 a").dataset.cur;

    fetch("/calculateExchangeRate", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        firstCryptoCurrencySymbol: dataCur,
        secondCryptoCurrencySymbol: secondDataCur
      })
    })
    .then(res => res.json())
    .then(data => {
      const exchangeRate = data.rate;
      document.querySelector(".rate_info").textContent = `1 ${dataCur} = ${exchangeRate} ${secondDataCur}`;
    });

   
    event.stopPropagation();
  });
});

document.addEventListener("click", function() {
  document.querySelector("#firstDrop").style.display = "none";
});



const optionElementsFirst = document.querySelectorAll(".option1");

optionElementsFirst.forEach(function (option) {
  option.addEventListener("click", function (event) {
    if ("ontouchstart" in window || navigator.maxTouchPoints) {
      event.preventDefault();
    }

    let dataCur = this.dataset.cur;
    let imageUrl = this.querySelector(".pm_select_img img").src;
    let optionText = this.querySelector("span").textContent;

    document.querySelector("#secondBtn .pm_select_img img").src = imageUrl;
    document.querySelector("#secondBtn span").textContent = optionText;
    document.querySelector("#secondBtn").dataset.cur = dataCur;

    document.querySelector("#currency2 .pm_select_child").dataset.cur = dataCur;
    document.querySelector("#currency2 .pm_select_child").textContent = dataCur;

    document.querySelector("#hiddenInput2").value = dataCur;

    document.querySelector("#amount_send2").dataset.cur = dataCur;
    document.querySelector("#amount_send2 ~ .addons").textContent = dataCur;

    const secondDataCur = document.querySelector("#currency1 a").dataset.cur;

    fetch("/calculateExchangeRate", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        firstCryptoCurrencySymbol: dataCur,
        secondCryptoCurrencySymbol: secondDataCur,
      }),
    })
      .then((res) => res.json())
      .then((data) => {
        const exchangeRate = data.rate;
        document.querySelector(".rate_info").textContent = `1 ${dataCur} = ${exchangeRate} ${secondDataCur}`;
      });

    document.querySelector("#secondDrop").style.display = "none";

    
    event.stopPropagation();
  });
});

document.addEventListener("click", function () {
  document.querySelector("#secondDrop").style.display = "none";
});


let isOpen = false;
const secondBtn = document.querySelector("#secondBtn");
const secondDrop = document.querySelector("#secondDrop");

secondBtn.addEventListener("click", function(event) {
  isOpen = !isOpen;

  if (isOpen) {
    secondDrop.style.display = "block";
  } else {
    secondDrop.style.display = "none";
  }

  event.stopPropagation();
});


document.addEventListener("click", function(event) {
  const secondBtn = document.querySelector("#secondBtn");
  const secondDrop = document.querySelector("#secondDrop");
  const isOpen = secondDrop.style.display !== "none";

  if (
    !event.target.closest("#secondBtn") &&
    !event.target.closest("#secondDrop")
  ) {
    if (isOpen) {
      secondDrop.style.display = "none";
    }
  }
});


  })

我尝试过的：

– 我正在检查是否有语法错误，但是我没有
– 我以为我使用了一些高级功能，并用 bubble 重新编写了我的代码，但它没有帮助
– 我认为点击事件存在问题，所以我添加了触摸事件，但这没有帮助
– 我尝试在 Mac 上使用模拟，但代码在其中运行得很好
– 我在浏览器堆栈中使用了模拟，但出现了问题

解决方案1

I had similar problem on some project before. It turned out there was some invisible div over the element that should fire an event. I've sorted out on Browserstack's iphone emulator with dev console.

[ad_2]