Question

使用jQuery或其他方法，我想禁用移动设备和平板电脑上的所有链接，但仍然允许链接在Web /桌面上工作。我的代码：

<div class="large-12 columns photos">
  <div><a href="larger_image1.jpg"><img src="image1.jpg" /></a></div>
  <div><a href="larger_image2.jpg"><img src="image2.jpg" /></a></div>
  <div><a href="larger_image3.jpg"><img src="image3.jpg" /></a></div>
</div>

策略：嗅探用户设备，然后如果是移动设备，请将链接设置为＆＃34; javascript：void（0）＆＃34;或类似的。

我希望这次这是一个很好的问题。我在这里和谷歌都进行了一些搜索，但无法解决。

谢谢！布赖恩

Answer 1

如果您的意思是“禁用”，就像更改网址一样，例如index.html进入#，然后我们可以这样做：

// Detect different screens.
$(window).resize(function(
{
    // Detect the current screen width.
    var width = $(window).width();
    // Determine what you define a as a mobile screen size.
    var mobileScreen = 900;
    // Check whether the condition applies.
    if(width <= mobileScreen)
    {
        // Change every href attribute of every a element with #
        $('a').attr('href', '#');
        // You can also hide them, if you want, with
        // $('a').hide();
    }
    else
    {
        // Do nothing otherwise, 
        // or change the href attribute back to an actual url, using ids.
    }
}).resize(); // Trigger the re-size event on page load.

Answer 2

$('.photos a').click(function(event){
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        event.preventDefault();
    }
});

非常简单jsFiddle用于理解。在手机，平板电脑和桌面上试用它，看它是否按照您的计划运作。

Answer 3

This should get the work done:

<script type="text/javascript">
// get window width
var width = $(window).width();
// check if window width is smaller then 1024px (mobile or tablet
if(width < 1024) {
    // if yes then ...
    $("large-12.columns.photos a").click(function(e) {
        // this should prevent the clicking functionality
        e.preventDefault();
        // just to add some fun here
        alert('you are on mobile ... clicking doesnt work here');       
    });
}
</script>

如何禁用img <a href=""> link only on mobile, allow in web?</a>

3 个答案: