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 出力が表示されます。
問題を理解できません。入力やリンクがあれば役立ちます。

更新:ある程度問題が発生しました。console.log が複数回出力されるのはクラスの b'coz です (複数の画像があり、クリックするとそれらすべてでイベントがトリガーされます)。thisイベントを実行する現在のボタンのみを取得するようにターゲットに渡しますか? または、IDでそれを行う必要がありますか?

4

1 に答える 1