H5web頁(yè)中由于項(xiàng)目需求,需要實(shí)現(xiàn)一個(gè)長(zhǎng)按彈出自定義菜單供用戶(hù)選擇操作的功能,此功能可用jQuery的
touchstart,touchmove,touchend三個(gè)觸碰事件外加時(shí)間器實(shí)現(xiàn),這里就不多說(shuō)了.
研究css3得出只需在需要禁止的頁(yè)面中加入如下cssy樣式定義
body {
-webkit-touch-callout:none;/*系統(tǒng)默認(rèn)菜單被禁用*/
-webkit-user-select:none;/*webkit瀏覽器*/
-khtml-user-select:none;/*早起瀏覽器*/
-moz-user-select:none;/*火狐瀏覽器*/
-ms-user-select:none;/*IE瀏覽器*/
user-select:none;/*用戶(hù)是否能夠選中文本*/
}
此段css樣式加入后能解決ios下手機(jī)瀏覽器,微信瀏覽器長(zhǎng)按出現(xiàn)選擇系統(tǒng)菜單問(wèn)題,但是對(duì)于A(yíng)ndroid下微信瀏覽器還會(huì)出現(xiàn)不兼容問(wèn)題
需在禁用頁(yè)面加入一段js事件處理如下:
document.oncontextmenu=function(e){
? ? e.preventDefault();
};
oncontextmenu 事件在元素中用戶(hù)右擊鼠標(biāo)時(shí)觸發(fā)并打開(kāi)上下文菜單觉增。此處用于阻止菜單的出現(xiàn).
