Question

我有一个带有图像的方框，当悬停事件时，我会显示一个覆盖图，其中包含社交媒体的分享按钮，如FB，Twitter，pinterest等。
现在，当用户点击覆盖部分时，我希望他被重定向到图像的详细信息页面，如果他点击任何社交媒体按钮，则应该执行后续操作。这就是我试过的

 <script type="text/javascript">
$(".over").click(function(e){
    if ($(e.target).is('.followBtn')) {
        //this should not trigger if a click occured on one of the links
            console.log('herhererhreh');
            e.stopPropagation();
    }else{
        window.location=$(this).find("a.overClick").attr("href");
            //alert('in else!!');
    }

});

这是带有按钮

的相同叠加div的HTML

    <div class="over">
        <div class="twitter"></div>
        <div class="facebook"></div>
        <div class="pintrest"></div>
        <a href="javascript:void(0)" class="followBtn">Follow Vendor</a> </div>
    </div>

.over是叠加层<div>的类，.followBtn是叠加层上按钮的类。
如果我单击叠加层它可以正常工作，但是当我点击它上面的按钮时，它会进入if但会执行多次，即我在控制台窗口中获得10-12个console.log输出。登记/> 我无法弄清楚这个问题。任何输入或链接都会有所帮助。

更新：我在某种程度上遇到了问题，这是类的b'coz，console.log打印多次（我有多个图像，点击该事件是触发所有这些）。我的问题是如何将this传递给目标，以便我只获得当前按钮来执行事件？或者我需要在id上做吗？

Answer 1

也许是这样的？ .over是您的事件处理程序将应用于DOM的最高级别，然后您有一个选择器，告诉您在'.over'中您感兴趣的内容。处理程序内的$（this）指的是事件的目标。

$(".over").on('click', '.followBtn', function(e){
    //this should not trigger if a click occured on one of the links
    console.log('herhererhreh');
    e.stopPropagation();
}).on('click', 'a.overClick', function(e) {
    //console.log('in else!!');
    window.location=$(this).attr("href");
});

Jquery点击事件不适用于带按钮的叠加层

1 个答案: