需要帮助使用 JQuery 来防止点击不可见的锚标记答案

【问题标题】：Need help using JQuery to prevent invisible anchor tags from being clicked需要帮助使用 JQuery 来防止点击不可见的锚标记
【发布时间】：2017-08-27 01:01:12
【问题描述】：

在我的每个投资组合项目上，我都有一个与顶部重叠的 div，它的不透明度设置为零。当用户将鼠标悬停在一个项目上时（或者在移动的情况下，点击一个），div 转换为不透明度： 1. 我的问题是，如果用户点击位于此 div 内的任何锚标签（.portfolio-文本），它会在他们有机会看到链接之前将他们带离页面（此时 href="#" 会刷新页面）。

我对此的解决方案是向每个锚标记添加一个禁用的类（感谢下面的斯蒂芬托马斯），然后使用 jquery .hover() 函数删除该类。不幸的是，如果在悬停的同时单击锚标记（例如在移动设备上），那么它仍然会刷新页面，因为我认为 JQuery 太快而无法删除该类。

为了解决这个问题，我尝试在我的处理程序中使用 setTimeout 函数，但它不再从我的锚元素中删除隐藏类，即使仍然调用了该超时函数中的 console.log。

我不确定为什么仅仅因为有一个超时功能，同一行代码就不起作用。如果有更好的方法来完成我想做的事情，请告诉我。

编辑：

我正在重写它以更清晰，并包含了一个代码笔。我的问题出现在手机屏幕尺寸上，因此您需要在手机屏幕上或在检查器上查看。

https://codepen.io/colesam/full/NvLBPL/

html

<div class="full-page" id="portfolio-page">
    <div class="row">
        <div class="col-12">
            <h2 class="center-text">My Portfolio</h2>
            <hr>
        </div>
    </div>
    <div class="row">
        <div class="">
            <!-- offset col -->
        </div>
        <div class="col-12" id="portfolio-items">
            <div class="row">
                <div class="col-12">
                    <div class="portfolio-item">
                        <img src="http://basketball.net.au/wp-content/uploads/2008/04/placeholder.jpg" class="img-fluid"></img>
                        <div class="portfolio-text" id="test">
                            <h4>Wireframes</h4>
                            <a href="#" class="disabled">View</a>
                        </div>
                    </div>
                </div>        
                <div class="col-12">
                    <div class="portfolio-item">
                        <img src="http://basketball.net.au/wp-content/uploads/2008/04/placeholder.jpg" class="img-fluid"></img>
                        <div class="portfolio-text">
                            <h4>Coming Soon</h4>
                            <a href="#">View</a>
                        </div>
                    </div>
                </div> 
                <div class="col-12">
                    <div class="portfolio-item">
                        <img src="http://basketball.net.au/wp-content/uploads/2008/04/placeholder.jpg" class="img-fluid"></img>
                        <div class="portfolio-text">
                            <h4>Coming Soon</h4>
                            <a href="#">View</a>
                        </div>
                    </div>
                </div> 
            </div>
        </div>        
    </div>
</div>

jquery

$(document).ready(function() {    
    //  PORTFOLIO EVENT LISTENERS
    $('.portfolio-text').hover(
        function() {    //  hover on function
            setTimeout(function() {console.log('test'); $(this).children('a').removeClass('disabled');}, 50);
        },

        function() {    //  hover off function
            $(this).children('a').addClass('disabled');
        }
    );
});

【问题讨论】：

我无法完全弄清楚您在这里要做什么，但您可能希望查看 CSS 规则 pointer-events: none 作为禁用超链接的更简单方法。
我也看不到您要做什么，但 href="#" 不是锚标记的必需属性。如果您的意图是稍后使用 javascript 更改 href，那么将其从 html 标记中移除将按照您想要的方式工作。基本上没有 href= 的锚标签是不可点击的锚标签，也是最简单的解决方案。
注意我添加了响应式设计标签；因为这些人最适合回答这个问题。

标签： javascript jquery responsive-design settimeout

【解决方案1】：

听起来this 上下文存在问题，并且超出了您的闭包范围。为什么不试试呢：

$('.portfolio-text').hover(function() {
    var $that = $(this);  // <--- HERE
    setTimeout(function() {
        // here 'this' is in a different context/scope
        $that.children('a').removeClass('disabled'); // USE HERE
    }, 50);
}, function() {
    $(this).children('a').addClass('disabled');
});

或者，您可以通过以下方式阻止这些点击：

$('.portfolio-text').find('a:not(:visible)').on('click', function(e) {
    e.preventDefault();
    return false;
});

也许从那里开始，然后从那里开始。

希望这会有所帮助。

【讨论】：

您的第一个选项有效。为什么 $(this) 超出了 setTimeout 函数的范围？我认为其他内部的函数可以访问与外部函数相同的变量。
抱歉，刚看到这个。在setTimeout 中，您将传入一个闭包函数作为第一个参数。然后在该闭包中使用this，在这种情况下this 不再是指悬停在上面的DOM 元素。
在 SO 或搜索引擎上查找“Javascript Closures and 'this'”。更好地理解它以在 JS 中更有效是一个好主意。干杯！

【解决方案2】：

听起来你在描述一个站点导航菜单，如果是这样，你为什么要打扰 jquery？您需要查看父子关系，父 div 应在子元素悬停时保持激活状态。我可以为您提供一些代码，但首先我需要确保您是在谈论菜单/导航，或者它是否是其他类似幻灯片的东西......

【讨论】：

【解决方案3】：

您可以在桌面上执行 Ajax，并在移动设备上使用链接。只是在第一个移动点击事件（或通过触摸图像模拟悬停事件）之后才使链接可点击，这使得链接可见。

这是基本思想。当他们悬停时为 url 使用 data-href 为链接创建一个 href 属性……当他们取消悬停时，从链接中删除 href 属性，即 href=""。现在它适用于移动设备，并且不会破坏桌面，（因为您可以在悬停后单击链接）。

<script>
$(document).ready(function() {    
    //  PORTFOLIO EVENT LISTENERS
    $('.portfolio-text').hover(
        function() {    //  hover on function
        $(this).children('a').removeClass('disabled');
        // if mobile code
            $(this).children('a').attr("href", $(this).children('a').data( "href" ))
        // else
        // do ajax to get data to desktop browser divide ... the data is located at $(this).children('a').data( "href" ) for ajax.      
        },
    );
});
</script>

<div class="full-page" id="portfolio-page">
    <div class="row">
        <div class="col-12">
            <h2 class="center-text">My Portfolio</h2>
            <hr>
        </div>
    </div>
    <div class="row">
        <div class="">
            <!-- offset col -->
        </div>
        <div class="col-12" id="portfolio-items">
            <div class="row">
                <div class="col-12">
                    <div class="portfolio-item">
                        <img src="http://basketball.net.au/wp-content/uploads/2008/04/placeholder.jpg" class="img-fluid"></img>
                        <div class="portfolio-text" id="test">
                            <h4>Wireframes</h4>
                            <a data-href="wireframe.html" class="disabled">View</a>
                        </div>
                    </div>
                </div>        
                <div class="col-12">
                    <div class="portfolio-item">
                        <img src="http://basketball.net.au/wp-content/uploads/2008/04/placeholder.jpg" class="img-fluid"></img>
                        <div class="portfolio-text">
                            <h4>Coming Soon</h4>
                            <a data-href="portfolio2.html" >View</a>
                        </div>
                    </div>
                </div> 
                <div class="col-12">
                    <div class="portfolio-item">
                        <img src="http://basketball.net.au/wp-content/uploads/2008/04/placeholder.jpg" class="img-fluid"></img>
                        <div class="portfolio-text">
                            <h4>Coming Soon</h4>
                            <a data-href="portfolio2.html" >View</a>
                        </div>
                    </div>
                </div> 
            </div>
        </div>        
    </div>
</div>

【讨论】：