IE10單擊縮略圖可在新窗口中打開大圖像，而不是替換特色圖像

我有Shopify商店，當該產品有顏色變體時，該商店在特色圖像下方具有縮略圖。當您單擊縮略圖時，它會將縮略圖的大版本替換爲精選圖像。這在通常的Chrome，Firefox，Safari中運行良好，但在IE10中不起作用。在IE10中，當我單擊縮略圖時，它將在新窗口中打開較大的版本，而不是替換圖像。IE10單擊縮略圖可在新窗口中打開大圖像，而不是替換特色圖像

這裏是我的HTML：

{% if product.images.size > 1 %} 
     <ul id="product-photo-thumbs" class="clearfix grid"> 
     {% for image in product.images %} 
     <li class="product-photo-thumb"> 
      <a href="{{ image.src | product_img_url: 'grande' }}"> 
      <img src="{{ image.src | product_img_url: 'small' }}" alt="{{ image.alt | escape }}" /> 
      </a> 
     </li> 
     {% endfor %} 
     </ul> 
     {% endif %}

而這裏的JavaScript的：

// Load variant image into feature area 
    $('.product-photo-thumb a').click(function() { 
    var url = $(this).attr('href'); 
    $('#product-photo-container img').attr('src',url); 
    event.preventDefault(); 
    });

任何想法（：P比告訴我的客戶停止使用IE等）？謝謝！

來源

2013-10-24 APAD1

JS在IE中無法正常運行，這就是爲什麼在點擊圖像時發生默認點擊操作的原因。我建議看看你的錯誤控制檯（並且設置它在頁面改變時不會自行刪除）。 ...編輯...我也注意到你正在調用'event.preventDefault（）'，但是你沒有在事件處理程序中聲明'event'參數。你可以改爲使用'return false'或者只添加'event'作爲參數。 – Jasper

試試這個：

// Load variant image into feature area 
$('.product-photo-thumb a').click(function(e) { 
    e.preventDefault(); 
    var url = $(this).attr('href'); 
    $('#product-photo-container img').attr('src',url); 
});

我想你需要兩件事情，一個變量，使用e而不是event以避免碰撞的關鍵字。在你真正做東西之前放置preventDefault。

來源

2013-10-25 03:40:40

這樣做，謝謝！ – APAD1

如果您有單擊事件處理程序，則不需要。那麼你不必擔心事件傳播。 –

歡迎您，很高興我能提供幫助。 –

IE10單擊縮略圖可在新窗口中打開大圖像，而不是替換特色圖像

回答

相關問題