javascript - 如何使 HTML 元素仅在特定屏幕尺寸下可点击

Question

我正在尝试将旧的定制网站转换为响应式网站。我已经完成了大部分 CSS 工作，并且可以获得大部分我想要的尺寸和定位。最后一篇文章让我感到悲伤。

我在页面上显示了一系列新闻文章。当我转到手机大小的显示器时，我真的希望这些标题变得“可点击”，以便我可以使用它们来显示/隐藏文章的详细信息。但我不希望这些标题在更大的屏幕尺寸下可以点击。

每篇文章的基本布局是...

<article id="article-001">
    <div class="newsArticleTitle">Title goes here</div>
    <div class="newsArticleTeaser">
        <p>
            Teaser paragraph</p>
    </div>
    <div class="newsArticleContent">
        <p>
            Paragraph 1</p>
        <p>
            Paragraph 2</p>
    </div>
</article>

随着屏幕尺寸的减小，控制这些文章显示的相关 CSS 是...

@media only screen and (max-width: 479px) {
    .newsArticleTeaser {
        display: none;
    }
}


@media only screen and (max-width: 319px) {
    .newsArticleContent {
        display: none;
    }
}

...因此在最窄的屏幕尺寸下，只有文章标题可见。然后我需要/希望该文章标题(带 class="newsArticleTitle" 的 div)成为可点击的元素，以便切换预告片和内容的可见性。

有没有一种明智的方法可以实现这一点？我的备用方法可能是复制标题元素 - 一次使用 <a>标记包装它，一旦没有 - 并使用 CSS 切换这两个的可见性。但这感觉不对。

有没有人更优雅地解决了这个问题，或者对更好的设计方法有任何建议？

Answer 1

您可以将 css 属性 pointer-events: none 与媒体查询结合使用:

.elementToClickInMobile {
    pointer-events: none;
    @media all and (max-width: 460px) {
        pointer-events: all
    }
}

这将防止在大于 460px

的大屏幕上发生任何点击事件

编辑//正如正确建议的那样，这有效 >IE10

您可以使用旧的(过时的)浏览器的回退

$("elementToClick").click(function(e){
    var outerWidth = window.outerWidth
    if (outerWidth > 480) {
        e.preventDefault(); //for browsers
        e.returnValue = false; //for IE
        return false
    }
});

JS 未经测试，请随时评论进一步的建议!

EDIT2// 找到了 IE7+ 指针事件的巧妙回退，包括 preventClick() 方法! https://github.com/vistaprint/PointyJS