手机浏览器中屏蔽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");

                                }

                            }]

                        );

                        });

巴特西

手机浏览器中屏蔽img的系统右键菜单context menu

最新文章

热门文章