旧版IOS设备上卡片onClick事件失效问题求助

针对你遇到的旧版IOS设备上卡牌onClick事件失效的问题，结合你的代码，以下是几个针对性的修复方案：

1. 修复元素层级重叠问题 #

你的代码中.red-box元素设置了z-index: 1，而卡牌元素未设置z-index，导致红色盒子会覆盖在卡牌上方，拦截点击事件。需要给卡牌设置更高的z-index：

.card {
    /* 原有样式不变 */
    z-index: 2; /* 添加这一行，确保卡牌在红色盒子之上 */
}

2. 使用事件委托绑定点击事件 #

动态生成的元素在旧版IOS上可能存在绑定失效问题，改用事件委托绑定到父元素.cards上，兼容性更可靠：

// 移除内联的onclick属性，修改卡牌生成代码：
const cardHtml = `<div class='card down' style='transform: rotateX(60deg) rotateY(0deg) rotateZ(${randomRotation}deg) translateZ(${translateZValue}px);'><span>${cardValue}</span></div>`;

// 在脚本中添加事件委托：
$(document).ready(function() {
    $('.cards').on('click touchend', '.card', function(event) {
        // 阻止事件冒泡和默认行为，避免旧版IOS的冲突
        event.stopPropagation();
        event.preventDefault();
        cardClickHandler.call(this);
    });
});

3. 优化3D变换的事件兼容性 #

旧版IOS Safari对3D变换元素的事件处理存在兼容性问题，给父元素.cards添加透视属性，确保变换元素处于正确的堆叠上下文：

.cards {
    height: auto;
    width: auto;
    perspective: 1000px; /* 添加透视效果 */
    transform-style: preserve-3d; /* 保留3D变换 */
}

4. 添加触摸事件的兼容性处理 #

在CSS中添加属性增强旧版IOS的可点击性，避免文本选择或默认高亮干扰点击：

.card {
    /* 原有样式不变 */
    -webkit-tap-highlight-color: transparent; /* 移除点击高亮 */
    user-select: none; /* 禁止文本选择 */
    -webkit-user-select: none;
}

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            box-sizing: border-box;
            position: absolute;
            left: 50px;
            top: 50px;
            font-family: 'Suez One', cursive;
        }
        
        .red-box {
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              top: 230px;
              width: 300px;
              height: 25px;
              background-color: #FFCBAA;
              z-index: 1; 
          }
      
        .randomSuit {
            position: absolute;
            left: 50px;
            top: 50px;
        }

        .cards {
            height: auto;
            width: auto;
            perspective: 1000px;
            transform-style: preserve-3d;
        }

        .card {
            background-image: radial-gradient(#eeaeca, #94bbe9);
            left: 44%;
            top: 33%;
            transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translateY(0);
            position: absolute;
            width: 100px;
            height: 150px;
            border-radius: 10px;
            font-size: 0px;
            -webkit-transition: background-image 0.7s ease-in-out;
            transition: all 700ms, font-size 500ms, background-image 0.7s ease-in-out;
            border: 2px solid #060303;
            cursor: pointer;
            border-bottom-color: #933;
            box-shadow: -10px 40px 20px 2px rgba(0,0,0,0);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
            white-space: normal;
            word-wrap: break-word;
            text-align: center;
            z-index: 2;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            -webkit-user-select: none;
            
            &.opened {
                transform: scale(1.5) rotateX(0) rotateY(180deg) rotateZ(0) translateY(0) !important;
                box-shadow: 0 5px 14px rgba(0,0,0,0.1);
                font-size: 14px;
                background-image: radial-gradient(#ffffff, #ffffff);
            }
            &.is-removed {
                transform: translateY(200%) !important;
                font-size: 0px;
                background-image: radial-gradient(#eeaeca, #94bbe9);
                height: 75px;
                border-radius: 10px 10px 0 0;
                box-shadow: 0 -5px 5px rgba(0,0,0,0.01);
            }
            &.card.opened span {
                transform: scaleX(-1);
                display: inline-block;
            }
        }

        .card:first-child {
            box-shadow: 12px 12px 0px 12px rgba(0,0,0,0.3);
        }

        .card.down:last-child:hover {
            transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translateZ(50px) !important;
            box-shadow: -10px 40px 20px 2px rgba(0,0,0,0.2);
        }

    </style>
</head>
<body>
    <div class="cards">
        <!-- generate all 52 cards with values -->
        <script>
            let suits = ['Hjerter', 'Spar', 'Ruter', 'Kløver'];
            let values = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
            let translateZValue = 1;

            let cards = [];
            let allCardValues = [];
            for (let suit of suits) {
                for (let value of values) {
                    allCardValues.push(`${value}`);
                }
            }

            // Shuffle the array of card values
            for (let i = allCardValues.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [allCardValues[i], allCardValues[j]] = [allCardValues[j], allCardValues[i]];
            }

            // Generate card HTML using shuffled values
            for (let cardValue of allCardValues) {
                const randomRotation = Math.random() * (2) - 42;
                const cardHtml = `<div class='card down' style='transform: rotateX(60deg) rotateY(0deg) rotateZ(${randomRotation}deg) translateZ(${translateZValue}px);'><span>${cardValue}</span></div>`;
                cards.push(cardHtml);
                translateZValue += 1;
            }

            $('.cards').append(cards);
        </script>
    </div>
    <div class="red-box"></div>
    <script>
        function cardClickHandler() {
            if ($(this).hasClass('down')) {
                $(this).removeClass('down');
                $(this).addClass('opened');
            } else if ($(this).hasClass('opened')) {
                $(this).addClass('is-removed');
                // Find the new top card and make it clickable
                const isTopCard = $('.card:not(.is-removed):last');
            }
        }

        $(document).ready(function() {
            $('.cards').on('click touchend', '.card', function(event) {
                event.stopPropagation();
                event.preventDefault();
                cardClickHandler.call(this);
            });
        });
    </script>
</body>
</html>

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