javascript - 需要帮助使用 JQuery 来防止不可见的 anchor 标记被点击

Question

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

我的解决方案是向每个 anchor 标记添加一个禁用类(感谢下面的 Stephen Thomas)，然后使用 jquery .hover() 函数删除该类。不幸的是，如果同时单击 anchor 标记以悬停(如在移动设备上)，那么它仍会刷新页面，因为我认为 JQuery 删除类的速度太快了。

为了解决这个问题，我尝试在我的处理程序中使用 setTimeout 函数，但它不再从我的 anchor 元素中删除隐藏类，即使该超时函数中的 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>

j查询

$(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');
        }
    );
});

Answer 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;
});

也许以此为起点，并以此为基础。

希望这对您有所帮助。