Javascript tidak berfungsi untuk versi iOS iPhone tertentu

[ad_1]

Saya memiliki kode javascript di halaman web saya, Ini berfungsi untuk desktop, Android,
Namun itu tidak berfungsi untuk beberapa iPhone, setiap bagian kode saya, masukkan acara, klik acara

Berfungsi untuk model dan versi iPhone ini:

1. Iphone 13 safari versi 16.6

2. Iphone 12 safari versi 16.6

3. Iphone 13 safari versi 16.5.1

4. Iphone 11 safari versi 16.5

Namun kode saya tidak berfungsi untuk iPhone jenis ini:

1. Iphone 11 safari versi 16.1

2. Iphone 11 safari versi 16.3.1

3. Safari iPhone XS Max versi 16.5.1

4. Safari iPhone Xr versi 16.5.1

5. Safari iPhone XR versi 16.3.1

**Ini kode saya:**

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";
    }
  }
});


  })

Apa yang saya coba:

– Saya sedang memeriksa apakah ada kesalahan sintaksis, tetapi ternyata tidak ada
– Saya berpikir bahwa saya menggunakan beberapa fungsi lanjutan dan membuat ulang kode saya dengan gelembung tetapi tidak membantu
– Saya berpikir ada masalah dengan acara klik jadi saya menambahkan acara sentuh tetapi tidak membantu
– Saya mencoba menggunakan simulasi di Mac, tetapi kode di dalamnya berfungsi dengan sempurna
– Saya menggunakan simulasi di tumpukan browser dan ada masalah saya

Solusi 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]