【问题标题】: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,现在可以正常工作了。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-11-22
    • 1970-01-01
    • 2015-01-13
    • 1970-01-01
    • 1970-01-01
    • 2020-12-26
    • 1970-01-01
    相关资源
    最近更新 更多