修改

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 通过单击（this）img或点击其他产品的外部来删除QuickBuyProdBox。

有什么建议吗？

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

干杯，迈尔斯

Answer 1

使用$.data存储计数器，然后在第一次点击时递增计数器在事件处理程序内部，将prevent默认逻辑包装在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语句

仅在第一次点击时jQuery preventDefault

2 个答案:

修改