移动设备 DOM 块

Posted 2023-05-09

【中文标题】移动设备 DOM 块

【英文标题】：Mobile device DOM block

【发布时间】：2017-01-07 09:47:46

【问题描述】：

我创建了简单的标题栏。他们每个人都会在点击时发送一个请求，但是在移动设备上（不管是哪一个，甚至控制台上的桌面谷歌 Chrome 移动模块）DOM 开始被阻止并完全停止工作。 我怀疑：

当用户点击按钮时，我发送了很长的获取请求 我绑定了新的监听器（一次又一次），但不是这个标题栏

如何防止这种情况发生？

【问题讨论】：

请向我们展示导致问题的代码。尽力创造***.com/help/mcve

【参考方案1】：

您是如何附加点击事件的？应该不复杂。

这是一个应该可以工作的简单代码示例（也适用于移动浏览器）：

HTML sn-p：

<button id="myBtn">Click here to load content</button>
<div id="contentContainer"></div>

Javascript（使用 jQuery）sn-p：

$('#myBtn').on('click',function()

    // show some indication to the user that you are loading something
    $('#contentContainer').html('<strong>Loading content, please wait..</strong>');

    // do your ajax call
    $.ajax(
        url:'https://api.myapp.com/get/user-info',
    ).done(
    function(data)
        // all done - display the loaded content 
        $('#contentContainer').html(data);
    );
);

将此用作用例，如果您在移动设备上执行 javascript 后仍然被“阻止”（单击附加到单击处理程序的元素也在执行 js），这通常意味着您有一个javascript 错误 - 这会导致移动浏览器停止运行任何更多的 javascript，直到您解决问题并重新加载页面。

希望对你有所帮助！

【讨论】：

谢谢你的帮助我确实发现了问题，在移动端有 300 毫秒的延迟，我只用 css 修复了