码迷,mamicode.com
首页 > 移动开发 > 详细

HTML5 Android浏览器中屏蔽img的contextmenu

时间:2015-02-17 00:42:28      阅读:303      评论:0      收藏:0      [点我收藏+]

标签:

    我们知道通过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

标签:

原文地址:http://www.cnblogs.com/dajianshi/p/4294668.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!