zoukankan      html  css  js  c++  java
  • 手机浏览器中屏蔽img的系统右键菜单context menu

        我们知道通过oncontextmenu事件可以屏蔽浏览器右键菜单

    $('img').on("contextmenu",function(E){E.preventDefault();E.stopPropagation();E.returnValue=false; return false;})

        可是这一招在移动设备的浏览器中却失灵了,移动设备的浏览器的contextmenu是通过长按事件触发的,我想正是因为这和原因造成的上述手段失灵。

        经调试发现,屏蔽touchstart事件可以解决:

     $('img').on("touchstart",function(E){E.preventDefault();E.stopPropagation();});

      但是,按下葫芦浮起瓢,上述代码屏蔽了系统邮件菜单的同时也造成longTap事件也不触发了,这直接导致自己的context menu也出不来了!没办法只能自己想办法解决了!以下代码基于app framework 实现了屏蔽手机浏览器的contextmenu、拖拽控件移动、并在长按时能够显示自己的contextmenu(af中的actionsheet):

    var tapTimer=null;
                            $('img').on("touchstart",function(E){
                                E.preventDefault();E.stopPropagation();
                                
                                var el=this;var me=$(this);$("#tip").text("in touchstart");
                                var t=E.touches[0];
                                tapTimer=setTimeout(function(){me.trigger('touchend').trigger('longTap');},1500);
                              
                                        me.data("mx",t.pageX);me.data("my",t.pageY);
                                        me.data("ex",el.offsetLeft);me.data("ey",el.offsetTop);
    
                            })
                            .on('touchmove',function(E){E.preventDefault();E.stopPropagation();
                                if(tapTimer!=null)clearTimeout(tapTimer);
                           var t=E.touches[0];
                                var mx=parseInt(me.data("mx")),my=parseInt(me.data("my"));
                                var ex=parseInt(me.data("ex")),ey=parseInt(me.data("ey"));
                                var nx=ex+t.pageX - mx , ny=ey+t.pageY-my
                               $("#tip").text("in touch move : "+"or mx,my, new mx,my or ex,ey="+mx+","+my+","+t.pageX+","+t.pageY+","+ex+","+ey+" dest x,y="+nx+","+ny);
                                me.css({"left":nx+"px","top":ny+"px"}) ;
    
                            })
                            .on('touchend',function(E){
                                if(tapTimer!=null)clearTimeout(tapTimer);
                                //E.preventDefault();E.stopPropagation();
                            });
                           
                            $('img').on("contextmenu",function(E){E.preventDefault();E.stopPropagation();E.returnValue=false; return false;})
                                    .on('longTap',function(E){E.stopPropagation();E.preventDefault()
                                $.ui.actionsheet(
                                [{
                                    text: 'back',
                                    cssClasses: 'red',
                                    handler: function () {
                                        alert("Clicked Back")
                                    }
                                }, {
                                    text: 'Alert Hi',
                                    cssClasses: 'blue',
                                    handler: function () {
                                        alert("Hi");
                                    }
                                }, {
                                    text: 'Alert Goodbye',
                                    cssClasses: '',
                                    handler: function () {
                                        alert("Goodbye");
                                    }
                                }]
                            );
                            });
  • 相关阅读:
    leetcode — simplify-path
    leetcode — climbing-stairs
    leetcode — sqrtx
    leetcode — text-justification
    leetcode — add-binary
    leetcode — plus-one
    leetcode — valid-number
    leetcode — minimum-path-sum
    leetcode — unique-paths-ii
    四维偏序 CDQ套CDQ
  • 原文地址:https://www.cnblogs.com/dajianshi/p/4294668.html
Copyright © 2011-2022 走看看