在移动设备中滚动时防止 <a> 标记中的点击事件答案

【问题标题】：Prevent click event in <a> tags when scrolling in mobile在移动设备中滚动时防止 <a> 标记中的点击事件
【发布时间】：2019-01-06 20:10:35
【问题描述】：

我正在创建一个网站，http://alfstyle.com，但在我的手机中向下滚动时遇到了问题。来自标签的点击事件无意中触发。真是令人沮丧。

我尝试停用插件、jQuery、一些脚本等，但没有任何效果。

I've made a screenshot where the issue begins.

我尝试使用我在此处找到的 javascript 的 sn-ps 来阻止重定向： Stop touchend firing links unintentionally

但它不起作用。

提前致谢！

【问题讨论】：

标签： javascript jquery wordpress events triggers

【解决方案1】：

通常情况下，在移动网站上滚动不会像您的网页那样激活链接。之所以发生是因为向页面注入了额外的代码。我发现了一部分代码会导致 unneded window.location 发生变化。

function toggleSubmenuDisplay() {

   document.addEventListener('touchstart', function(event) {

    if ( event.target.matches('a') ) {

        var url = event.target.getAttribute( 'href' ) ? event.target.getAttribute( 'href' ) : '';

        // If there’s a link, go to it on touchend
        if ( '#' !== url && '' !== url ) {
            window.location = url;

        // Open submenu if url is #
        }
        ...
     }

代码当前附加到所有 touchstart 操作。当在移动设备上触摸时，这个处理程序会被执行，这部分也会被执行：

if ( '#' !== url && '' !== url ) {
    window.location = url;
}

如果你将调试器放在这里，你会看到这段代码被执行了。

同时删除这个脚本，它会在 touchend 手势上重定向：

 $('a').on('click touchend', function(e) {
        var el = $(this);
        var link = el.attr('href');
        if (link !== undefined && link !== '') {
            window.location = link;
        }
    });

【讨论】：

非常感谢 Łukasz Blaszyński。你是我的救星。我停用了那个 .js，现在可以正常工作了。