JavaScript onClick 事件无法在带有 Divi 主题的移动设备上工作 - 在桌面上工作

Question

我遇到了 JavaScript onClick 事件无法在具有 Divi 主题的移动设备上触发的问题，即使相同的事件在桌面上运行良好。目标是在移动设备上打开模态框，但无法触发。

问题描述：

该错误似乎与

e.target.hash.slice(1)

在移动设备上引起问题有关。控制台日志显示

e.target.hash

有时未定义，从而导致错误。这是来自 script.min.js 的相关源错误代码片段：

if (n.hasClass("mobile_nav") && e.target.hash && (u = t("#" + e.target.hash.slice(1)), t(e.target).parent().hasClass("pum-trigger"))) {
    e.preventDefault();
    var f = t(e.target).parent().attr("class").split(" ").filter(function(t) {
        return t.includes("popmake");
    })[0].split("-")[1];
    t("#pum-" + f).css({ opacity: "1", display: "block" });
    t("#popmake-" + f).css({ opacity: "1", display: "block" });
}

每次我单击具有 onClick 侦听器的按钮时，即使它在桌面上运行良好，我也会遇到此错误：

在桌面上，onClick 事件按预期工作，但在移动设备上完全被阻止。这是我迄今为止尝试过的：

采取的步骤：

1. 更新了 Divi 主题：确保 Divi 完全更新以避免任何已知错误。
2. 停用插件：禁用所有插件以排除冲突，但发现行为没有变化。
3. 子主题覆盖：在我的子主题的functions.php中添加了自定义代码，以检查在运行.slice(1)之前是否定义了e.target.hash，但它没有解决问题。
4. 直接在主主题中测试：暂时将自定义代码移至主 Divi 主题functions.php以检查子主题问题，但没有任何改进。
5. 在控制台中调试：控制台日志表明 e.target.hash 在移动设备上通常未定义，这可能会阻止进一步的事件传播。

目标：

单击按钮时在移动设备上打开模式，使用 JavaScript onClick 事件

补充说明：

• 特定于移动设备的行为：e.target.hash 似乎在移动设备上并不始终可用，从而导致事件被阻止。
• 无缓存冲突：多次清除浏览器和服务器缓存以确保更改得到反映。

任何关于为什么 onClick 事件可能在移动设备上被阻止的建议，或者进一步解决此问题的其他步骤，我们将不胜感激。

Answer 1

移动设备通常将点击事件解释为 touchstart 和 touchend 的组合，这有时会干扰 JavaScript 处理，尤其是在 Divi 等主题中。您可以添加专门用于 touchstart 的事件侦听器作为后备 -

window.addEventListener("load", function() {
  document.querySelector(".your-button-class").addEventListener("click", openModal);
  document.querySelector(".your-button-class").addEventListener("touchstart", openModal);
}

或者，您可以绕过 e.target.hash 并直接使用要打开的模态的 ID