Question

我想根据宽度切换事件。对于移动，只有点击事件应该工作。对于桌面悬停事件应该工作。当调整大小我的代码页面加载我的代码工作不正常。请帮助我为什么我的代码不起作用。提前致谢

$(document).ready(function(){

    function forDesktop(){
    $(".popover-controls div").off('click');
    $(".popover-controls div").on('hover'); 
        $(".popover-controls div ").hover(function(e){
            //popup show code
        }); 

    }
    function forMobile(){
    console.log("mobile");
    $(".popover-controls div").off('hover');
    $(".popover-controls div").on('click');

     $(".popover-controls div").click(function(e){
            //popop show

        });
    }

    function process(){ 
        $(window).width() > 600?forDesktop():forMobile();
    }
    $(window).resize(function(){
        process()
    });
    process();
});

Answer 1

非常简单，首先你不能为每个事件编写这么多代码。我们必须提出非常简单的解决方案，这是它的工作原理

首先检查JS中页面的宽度，并在body上分配Desktop / Mobile Class：

 function process(){ 
   if( $(window).width() > 600){
     $("body").removeClass("mobile").addClass("desktop");

   }else{
     $("body").removeClass("desktop").addClass("mobile");
   }

}
$(window).resize(function(){
    process()
});

现在，您已执行悬停命令并单击：

     $(document).on('mouseover', 'body.mobile .popover-controls div',function(e){
            alert("hover");
        }); 

 $(document).on('click', 'body.desktop .popover-controls div',function(e){
            alert("click");
     console.log("click");
        });

我希望这对你有用。：）

检查Js小提琴示例：http://jsfiddle.net/asadalikanwal/xcj8p590/ 我刚刚为你创建了，我也修改了我的代码

Answer 2

首先检测手机/平板电脑触摸事件：

function is_touch_device() {
  return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
};

然后尝试这样：

function eventFire() {
    var _element = $(".popover-controls div");

    // True in Touch Enabled Devices
    if( is_touch_device() ) { 
        _element.click(function(e) { .... });
    }
    else {
         // apply Hover Event
        _element.hover();
    }
}

无需检测设备的宽度;）

第三方还有一个解决方案，最受欢迎的库是Modernizr

Answer 3

您可以使用JavaScript媒体查询来确定屏幕宽度here。

var mq = window.matchMedia( "(min-width: 500px)" );

matches属性根据查询结果返回true或false，例如

if (mq.matches) {
  // window width is at least 500px
} else {
  // window width is less than 500px
}

Answer 4

这对我有用。它是matchMedia()功能@Ḟḹáḿíṅḡ Ⱬỏḿƀíé shared和setTimeout()功能@Jeff Lemay shared at TeamTreeHouse.com

的组合

我主要贡献的是使用.unbind()功能。我花了好一会儿才知道这是必要的，因此.hover()和.click()函数不会越过导线。

    //Add/remove classes, in nav to show/hide elements
    function navClassHandler(){
        if($(this).hasClass('active')){
            $('.dropdown').removeClass('active');
        }else{
            $('.dropdown').removeClass('active');
            $(this).addClass('active');
        }
    }

    function handleNav() {
        //instantanteous check to see if the document matches the media query.
        const mqM = window.matchMedia('(max-width: 1025px)');
        const mqD = window.matchMedia('(min-width: 1025px)');

        $('.dropdown').unbind(); //necessary to remove previous hover/click event handler
        if (mqM.matches) {
            console.log("Handling mobile");
            $('.dropdown').click(navClassHandler);
        } else {
            console.log("Handling desktop");
            $('.dropdown').hover(navClassHandler);
        }
    }

    // we set an empty variable here that will be used to clearTimeout
    let id;

    /* this tells the page to wait half a second before making any changes, 
    we call our handleNav function here but our actual actions/adjustments are in handleNav */
    $(window).resize(function() {
        clearTimeout(id);
        id = setTimeout(handleNav, 500);
    });

    //As soon as the document loads, run handleNav to set nav behavior
    $(document).ready(handleNav);

根据宽度切换单击和悬停事件

4 个答案: