jQuery preventDefault 仅在第一次点击时

Question

我一直在为我的客户购物网站上的附加功能开发一些 jQuery。我被要求创建一个快速购买按钮，该按钮位于从 Locatya 拉入的类别页面上的产品顶部 - 到目前为止非常简单。

对于桌面站点，以下代码可以完美运行：

jQuery('#main_cat_prods').delegate('img', 'mouseenter', function(){
                var $skuID = this.src.match(/[a-z][a-z][a-z]\d\d\d\d\d/)[0];

            if ( !jQuery('#QuickBuyProdBox').length ) {
                jQuery(this).closest('.image').prepend('<div id="QuickBuyProdBox">');
            };
                jQuery("#QuickBuyProdBox").click(function(){
                    jQuery.event.trigger('lightbox', $skuID);
                });
                jQuery('.image, #QuickBuyProdBox').mouseleave(function(){
                    jQuery('#QuickBuyProdBox').remove();
            });
        });

现在，当尝试在平板电脑上开发稍微不同的功能时，困难就来了；我的客户希望在 QuickBuyProdBox 之前单击一下，然后再轻点一下：

如果在 QuickBuyProdBox 外部单击，则继续正常进入产品页面 如果单击 QuickBuyProdBox，则启动灯箱。

我首先在努力：

防止类别页面上 img 的默认行为，我尝试了 preventDefault 但这会停止 main_cat_prods div 上的所有点击事件。我还尝试为第一个实例绑定单击然后解除绑定，这似乎也不起作用：

jQuery("#main_cat_prods").bind('img', 'click', function( event) {
            if ( !jQuery('#QuickBuyProdBox').length ) {
                jQuery(this).closest('.image').prepend('<div id="QuickBuyProdBox">');
            };
            console.log("this works");
            event.preventDefault();
            jQuery(this).unbind( event );
        });

总而言之，上面的代码不起作用。我需要能够：

单击 main_cat_prods div 并在添加 QuickBuyProdBox 时阻止默认功能。 能够单击 main_cat_prods 或 QuickBuyProdBox 通过单击（此）img 外部或单击另一个产品来删除 QuickBuyProdBox。

有什么建议吗？

如果这没有意义，请告诉我，我可以尝试改写它！

干杯， 迈尔斯

Answer 1

使用$.data 存储计数器，然后在第一次点击时递增计数器。
在事件处理程序中，将阻止默认逻辑包装在 if 中，在继续之前检查计数器值。

jQuery("#main_cat_prods img").data('clicked', 0);
jQuery("#main_cat_prods").bind('img', 'click', function( event) {
   var state = $(this).data('clicked') || 0;
   if(state === 0){
      // this will only happen the first time
      event.preventDefault();
      state++; // <-- we increment the state
      $(this).data('clicked', state);// <-- and store it back in data
   }
   // other code
});

这还有一个额外的好处，就是不需要您声明全局变量。

---

编辑

这可能会更好：

jQuery("#main_cat_prods img").data('clicked', 0);
jQuery("#main_cat_prods").bind('img', 'click', function( event) {
   var state = $(this).data('clicked') || 0;
   if(state === 0){
      // this will only happen the first time
      event.preventDefault();
      event.stopPropagation();
      state++; // <-- we increment the state
      $(this).data('clicked', state);// <-- and store it back in data
      return; // <-- we stop the rest of the handler from running
   }
   // other code
});

Answer 2

我也有这个问题。

在这里查看：Form submit after preventDefault

你只需要在 preventDefault 周围加上一个 if 语句