Menu
I am trying to achieve a functionality in mobile devices where tap would open 'codepen.io'(handled by ng-click) and tap and hold would open the context menu with 'Open In New Tab' option in it, which leads to 'stackoverflow.com'(handled by ng-href)
Here is the code: HTML:
<head>
<link href="https://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="https://code.ionicframework.com/nightly/js/ionic.bundle.js"> </script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MainController as main">
<a ng-href="https://stackoverflow.com/" ng-click="$event.preventDefault(); main.getUrl()">The Link</a>
</div>
</div>
</body>
Controller (AngularJS 1.4.9):
(function() {
'use strict';
angular
.module('myApp', [])
.controller('MainController', MainController);
function MainController() {
var vm = this;
vm.getUrl = function() {
window.location.replace('https://codepen.io');
}
}
})();
$event.preventDefault(); was added to ng-click to prevent 'href' from overriding ng-click on tap and loading the wrong url.
I have issue achieving the functionality in ios devices, where no context menu was opened on 'tap and hold' in ios devices before Iphone X.
If you remove the ionic framework source from the head tag, the code works in ios devices. However, I am using ionic framework for my angularJS application. So it can't be avoided.
Is there a way to achieve 'open In new tab' option to be available in ios devices with ionic still there?
Here is the codepen link : demo
560
asked Jan 01 '26 13:01
In your code, -webkit-touch-callout property may be none. Rmove that or add the following style, will resolve this issue
body {-webkit-touch-callout: default !important;}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With