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"); } }] ); });
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。