2

我有一个带有图像的框，当触发悬停事件时，我会在该框上显示一个带有共享按钮的叠加层，用于 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 输出。
我无法弄清楚这个问题。任何输入或链接都会有所帮助。

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

4

1 回答 1

2

也许是这样的？.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");
});
于 2013-12-20T18:01:03.113 回答