Javascript 需要使用JQuery防止单击不可见的锚标记的帮助吗

在我的每个投资组合项目上，我都有一个div重叠在顶部，其不透明度设置为零。当用户将鼠标悬停在某个项目上（或者在移动设备上，点击其中一个项目）时，div将转换为不透明：1。我的问题是，如果用户点击此div（.portfolio text）中的任何锚标记，在他们有机会看到链接之前，它会将他们从页面中带走（此时href=“#”会刷新页面）

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

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

我不知道为什么仅仅因为有一个超时函数，同一行代码就不能工作。如果有更好的方法来完成我想做的事情，请让我知道

编辑：

我重写这是为了更清楚，并已包括一个代码笔。我的问题发生在手机屏幕尺寸上，所以您希望在手机屏幕或检查员上查看

html

---

听起来像是在描述一个站点导航菜单，如果是这样，为什么还要用jquery呢？

---

您需要查看父和子关系，当子元素悬停时，父div应该保持激活状态。我可以为您提供一些代码，但首先我需要确保您谈论的是菜单/导航，或者是幻灯片放映之类的内容……

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

这是基本的想法。当他们悬停为链接创建href attrib时，使用data href作为url。。。当他们取消覆盖时，从链接中删除href属性，即href=“”。现在它适用于移动设备，并且不会破坏桌面（因为您可以在鼠标悬停后单击链接）

$（文档）.ready（函数（）{
//公文包事件侦听器
$（'.portfolio text'）。悬停(
函数（）{//将鼠标悬停在函数上
$（this.children（'a'）.removeClass（'disabled'）；
//如果移动代码
$（this.children（'a'）.attr（“href”），$（this.children（'a'）.data（“href”））
//否则
//使用ajax将数据发送到桌面浏览器divide…数据位于$（this）.children（'a'）。ajax的数据（'href'）。
},
);
});
我的投资组合

线框图
马上就来
马上就来

听起来像是上下文的问题，它超出了闭包的范围。为什么不试试：

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

也许从那开始，并从那开始发展

---

希望这能有所帮助。

我不太清楚您在这里到底想做什么，但您可能希望将CSS规则

指针事件：none

作为禁用超链接的更简单方法。我也看不到您想做什么，但href=“#”不是锚标记的必需属性。如果您的目的是在以后使用javascript更改href，那么将其从html标记中删除将按照您想要的方式工作。基本上，没有href=的achor标签是不可点击的锚定标签，也是最简单的解决方案；因为这些人最适合回答这个问题。你的第一个选择奏效了。为什么$（this）超出了setTimeout函数的作用域？我认为其他函数内部的函数可以访问与外部函数相同的变量。抱歉，刚才看到了这个。在

setTimeout

中，您将传递一个闭包函数作为第一个参数。然后在该闭包中使用

this

，在这种情况下

this

不再引用悬停的DOM元素。在SO或搜索引擎上查找“Javascript闭包和'this'”。更好地理解它是一个好主意，以便在JS中更有效。干杯

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

<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>

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