iOS移动端商品缩略图点击需双击问题排查求助

问题概述 #

开发电商网站时，商品缩略图点击切换功能在Windows、Android端表现正常：点击缩略图可同步切换商品变体标题；但iOS移动端需双击才生效，单点击无法触发变体标题更新。

核心排查与修复方向 #

1. 补全变体标题更新逻辑（核心修复点） #

当前selectVariantByThumb函数仅更新了表单的variant ID，但未调用showTheName函数更新标题，这是导致iOS端点击后标题不切换的直接原因之一。修改函数如下：

function selectVariantByThumb(e) {
    const target = e.currentTarget;
    const targetImageId = target.dataset.imageId;

    for (let variant of allVariants) {
        const imageId = variant.featured_media.id;

        if(imageId == targetImageId) {
            const imageUrl = variant.featured_media.preview_image.src.replace("https:","")
            document.querySelector(`[data-image-src*="${imageUrl}"]`)?.click();
            
            document.querySelector(`.product__section--buttons [method="post"] .formVariantId[name="id"]`).value = variant.id;
            document.querySelector(`.product__section--buttons [method="post"] .formVariantId[name="id"]`).setAttribute("value", variant.id);
            // 新增：调用标题更新函数
            showTheName(variant);
        }
    }
}

2. 处理iOS触摸事件兼容性 #

iOS Safari对非交互元素（如div）的click事件触发存在限制，且旧版系统有300ms点击延迟，建议补充触摸事件监听并添加防重复触发逻辑：

// 给缩略图同时绑定touchstart事件
for(let elem of allThumbs) {
    elem.addEventListener("click",selectVariantByThumb, false);
    elem.addEventListener("touchstart",selectVariantByThumb, false);
}

// 修改selectVariantByThumb函数，添加防重复触发逻辑
let isTouchHandled = false;
function selectVariantByThumb(e) {
    if (e.type === 'touchstart') {
      isTouchHandled = true;
    } else if (e.type === 'click' && isTouchHandled) {
      isTouchHandled = false;
      return;
    }
    // 原有逻辑...
}

3. 排查事件冲突与冒泡 #

检查是否存在父容器事件拦截或脚本冲突：

• 在selectVariantByThumb函数开头添加e.stopPropagation()，阻止事件冒泡到父容器
• 确认轮播插件等第三方脚本未对缩略图添加额外点击事件，导致触发顺序混乱

4. 修复iOS特定样式干扰 #

确保缩略图元素的交互属性正常：

• 给缩略图容器添加cursor: pointer样式，明确标识为可交互元素
• 检查CSS是否设置了pointer-events: none或user-select: none，若有则移除或改为pointer-events: auto

附：相关实现代码 #

缩略图功能逻辑（已修复核心问题） #

const allVariants = JSON.parse(document.getElementById('em_product_variants').innerText);
const allColorTypes = document.querySelectorAll(`[name="main color"]`);
let allColorActive = false;

for(let elem of allColorTypes) {
    elem.addEventListener("change", function(e){
        const target = e.currentTarget;
        if(target.id != "showAll") {
            allColorActive = false;
            return;
        }
        document.querySelector(`[data-color-2] .swatches__option-value`).innerText = "All Colors";
        allColorActive = true;
    })
}

const allColorRadio = document.querySelectorAll(`[name="color"], [name="choose color"]`);
for(let elem of allColorRadio) {
    elem.addEventListener("change", function(e) {
        const target = e.currentTarget
        
        const imageValue = target.value;
        let selectedVariant = "";
        for(let variant of allVariants) {
            const option1 = variant.option1;
            if(imageValue == option1) {
                selectedVariant = variant;
                break;
            }
        }

        if(allColorActive ==  false) {
            showTheName(selectedVariant)
            return;
        }

        const imageID = selectedVariant.featured_media.id;
        document.querySelector(`.product__section--buttons [method="post"] .formVariantId[name="id"]`).value = selectedVariant.id;
        document.querySelector(`.product__section--buttons [method="post"] .formVariantId[name="id"]`).setAttribute("value", selectedVariant.id)
      
        document.querySelector(`.js-thumb-item-img[data-image-id="${imageID}"]`).click()
        showTheName(selectedVariant)
    })
}

function showTheName(variant) {
  document.querySelector(`#wisn-variant-title span`).innerText = "";
    if(variant.option2) {
      document.querySelector(`#wisn-variant-title span`).innerText += variant.option2 + " / "
    }
    if(variant.option1) {
       document.querySelector(`#wisn-variant-title span`).innerText += " "+ variant.option1
    }
}

const allThumbs = document.querySelectorAll(`#thumbnails div[data-image-id]`);
let isTouchHandled = false;

//add eventListeners for thumbs
for(let elem of allThumbs) {
    elem.addEventListener("click",selectVariantByThumb, false);
    elem.addEventListener("touchstart",selectVariantByThumb, false);
}

function selectVariantByThumb(e) {
    // 防重复触发逻辑
    if (e.type === 'touchstart') {
      isTouchHandled = true;
    } else if (e.type === 'click' && isTouchHandled) {
      isTouchHandled = false;
      return;
    }
    
    e.stopPropagation();
    const target = e.currentTarget;
    const targetImageId = target.dataset.imageId;

    for (let variant of allVariants) {
        const imageId = variant.featured_media.id;

        if(imageId == targetImageId) {
            const imageUrl = variant.featured_media.preview_image.src.replace("https:","")
            document.querySelector(`[data-image-src*="${imageUrl}"]`)?.click();
            
            document.querySelector(`.product__section--buttons [method="post"] .formVariantId[name="id"]`).value = variant.id;
            document.querySelector(`.product__section--buttons [method="post"] .formVariantId[name="id"]`).setAttribute("value", variant.id);
            showTheName(variant);
        }
    }
}
window.addEventListener('DOMContentLoaded', function(){
  document.querySelector(`[name="color"]:checked`)?.dispatchEvent(new Event("change"))
  document.querySelector(`[name="choose color"]:checked`)?.dispatchEvent(new Event("change"))

  document.querySelector('#showAll')?.click()
})

缩略图结构代码 #

<div class="variant-name-changer" id="wisn-variant-title"><span></span></div>
<div id="thumbnails" class="thumb-slider thumbnail-slider custom {{ style }} {{ width }} auto mobile-hide"
data-thumbnail-position="{{ thumbnail_position }}">
  <div class="thumb-slider-wrapper {{ js_class }} js-thumb-wrapper" id="thumb-slider-wrapper">
    <div class="carousel-nav thumb-slider-slides slides product-single__thumbnails-{{ section.id }} js-thumb-carousel-nav{% if product.media.size <4 %} no_carousel{% endif %}">

内容的提问来源于stack exchange，提问作者Vanda Nagy