jquery - 関数の実行を回避する変数の設定

Question

2 つの要素の画像と div が互いに重なっています。div をクリックすると、div を回転させるtransitIT() が呼び出されますが、次のクリックが速すぎると、クリックされた画像が呼び出されます。方法がわかりません。使用event.stopPropagation()して設定してみましたclickedEnabled を使用して画像のクリックを回避しますが、画像のクリック イベントが呼び出されます。

$(document).on('click', '#front', function(event) {
event.stopPropagation();
//alert('Front Clicked globe='+globe);
 transitIT(this);
 });


 $(document).on('click', 'img', function() {
  alert('htmlcalled image Clicked Called='+clickEnabled);

/*to check if div is transitioning state*/
    if (!clickEnabled){return;}

    //Doing some alignement for image               ...........

     });

Answer 1

I suggest you to test the element id, because you don't know in which order both callbacks will be actually called.

  $(document).on('click', 'img', function() {
    if (this.id !== "front")
    {
      alert('htmlcalled image Clicked Called='+clickEnabled);
    }
 });

Answer 2

これを行うと、イベントのバブリングを防ぐことができます。

$(document).on('click', 'img', function (event) {
    if (event.target.tagName !== 'IMG') return;

    alert('htmlcalled image Clicked Called=' + clickEnabled);
    //Doing some alignement for image ...........
});