ホバーイベントが発生すると、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でそれを行う必要がありますか?