如何在 iOS 设备上使用 JavaScript（或 CSS）添加点击事件？

Question

我在尝试在网站上实施悬停技术时遇到问题。基本上，我有div (.portfolio-item) 用于显示background-image。 .portfolio-item 包含一个直接子元素——<div class="portfolio-item-info">，它是绝对定位的，仅当用户将鼠标悬停在父元素上时才会显示。

这在笔记本电脑和 Android 设备上运行良好，但对于 iOS 设备则根本不起作用。因此，如果用户触摸.portfolio-item div，则不会发生任何事情。

HTML

<div class="portfolio-item" style="background-image: url('path/to/url')">
    <div class="portfolio-item-info">
        <h3 class="font-secondary-bold">Some Title</h3>
        <ul class="list-unstyled list-inline">
            <li>Publication</li>
            <li>Print</li>
        </ul>
        <a href="#">Take a look</a>
    </div>
</div>

CSS

.portfolio-item {
    background-color: #fff;
    background-size: cover;
    margin-bottom: 24px;
    overflow: hidden;
    position: relative;
    min-height: $portfolioItemHeight;

    &:before {
        content: "";
        background-color: $colorLight;
        background-color: rgba(255, 255, 255, 0.8);
        min-height: $portfolioItemHeight;
        opacity: 0;
        position: absolute;
        left: 0;
        right: 0;
        transition: opacity 0.5s ease-in-out;
    }

    &:hover,
    &:focus {

        &:before {
            opacity: 1;
        }

        .portfolio-item-info {
            top: 0;
        }
    }
}

为了让它发挥作用，我使用了一些非常老套的东西，我在 .portfolio-item div 上添加了一个 onclick 属性，例如

<div class="portfolio-item" onclick="void(0)" style="background-image: url('path/to/url')">

这个 hacky 解决方案确实有效，但理想情况下我希望少一些……hacky。

Answer 1

没有标准定义触摸设备应如何处理悬停，这取决于浏览器供应商，因此任何解决方案都将是一种“黑客”。但是，以下一种更可靠：

使用 jQuery，您可以在触摸开始/结束时打开/关闭类 hover

$(document).ready(function() {
    $('.portfolio-item').bind('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover');
    });
});

在 CSS 中添加 .hover 类，其参数与现有 :hover 相同。