HTML5 Android瀏覽器中屏蔽img的contextmenu

標籤：

    我們知道通過oncontextmenu事件可以屏蔽瀏覽器右鍵菜單

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

    可是這一招在android系統的瀏覽器中卻失靈了，行動裝置的瀏覽器的contextmenu是通過長按事件觸發的，我想可能是因此造成的上述手段失靈。

    經調試發現，屏蔽touchstart事件可以解決

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

以下代碼基於af實現屏蔽瀏覽器的contextmenu，拖拽控制項移動，並長按顯示自己的contextmenu（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");                                }                            }]                        );                        });

 

HTML5 Android瀏覽器中屏蔽img的contextmenu