Framework7: [v2] prevent context menu on android

Created on 22 Sep 2017  路  6Comments  路  Source: framework7io/framework7

This is a (multiple allowed):

  • [x] enhancement
  • [x] feature-discussion (RFC)

Currently, touch call-out is disabled for IOS using -webkit-touch-callout which is awesome, also same seems is added into material css but it is not working as stated in MDN it is only implemented as an experimental thing into safari.

Long tap context menu on native-like F7 apps in android chrome is little annoying. From this question seems the only available method would
be preventing window.oncontextmenuevent like this:

window.oncontextmenu = function(event) {
     event.preventDefault();
     event.stopPropagation();
     return false;
};

I've opened this issue instead of a PR to ask first is there any reason not using this approach?

Another thing about browser-specific touch events. Is selectable text something expected?

/ping @nolimits4web

outdated

Most helpful comment

We can add context menu disabling at https://github.com/framework7io/Framework7/blob/v2/src/modules/touch/touch.js#L580 wrapping it with if (Device.ios || Device.android)

All 6 comments

Update: I've added some experimental changes into nuxt7 demo for this (https://nuxt7.surge.sh) for a quick review :)

@nolimits4web
Looks fine and easy :)

+1

Ok, i agree with disabling context menu. But let's do it for mobiles only (when we assume it is used in apps). Not sure about disabling it totally because F7 also can be used in desktop web sites and web apps. For same reason let's keep user-select as it is. It is not hard to add one custom line of code if it is required.

We can add context menu disabling at https://github.com/framework7io/Framework7/blob/v2/src/modules/touch/touch.js#L580 wrapping it with if (Device.ios || Device.android)

Issue is closed because of outdated, irrelevant or not actual

If this issue is still actual and reproducible for latest version of Framework7, please create new issue and fill the issue template correctly:

  • Clearly describe the issue including steps to reproduce when it is a bug.
  • Make sure you fill in the earliest version that you know has the issue.
  • Provide live link or JSFiddle/Codepen or website with issue
Was this page helpful?
0 / 5 - 0 ratings