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

How can I add click events with JavaScript (or CSS) on iOS devices?

本文关键字：CSS 添加 事件 JavaScript iOS      更新时间：2023-09-26

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

这在笔记本电脑和Android设备上工作正常，但对于iOS设备，它根本不起作用。因此，如果用户触摸.portfolio-itemdiv，则没有任何反应。

.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;
        }
    }
}

为了使它工作，我正在使用一些非常笨拙的东西，我在div .portfolio-item上放置了一个onclick属性，例如

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

这个笨拙的解决方案确实有效，但理想情况下我想要更少的东西......哈克。

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

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

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

在 CSS 中，您可以添加与现有:hover具有相同参数的 .hover 类。

相关文章：