javascript - 根据宽度切换点击和悬停事件

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 上分配桌面/移动类:

 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 fiddle 示例:http://jsfiddle.net/asadalikanwal/xcj8p590/我刚刚为你创建了，我也修改了我的代码