Ionic 框架使 ios 设备中的 ng-href 无法使用“在新选项卡中打开”选项

Question

我正在尝试在移动设备中实现一种功能，其中 tap 会打开“codepen.io”（由 ng-click 处理），点击并按住会打开带有“在新选项卡中打开”选项的上下文菜单，这会导致“stackoverflow.com”（由 ng-href 处理）

代码如下： 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>

控制器（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(); 被添加到ng-click 以防止'href' 在点击 时覆盖ng-click 并加载错误的网址。

我在 ios 设备中实现该功能时遇到问题，在 Iphone X 之前，在 ios 设备中“点击并按住”没有打开上下文菜单。

如果您从 head 标签中删除 ionic 框架源代码，则代码可以在 ios 设备中运行。但是，我正在为我的 angularJS 应用程序使用离子框架。所以无法避免。

有没有办法在 ionic 仍然存在的 ios 设备中实现“在新选项卡中打开”选项？

这里是codepen链接：demo

Answer 1

在您的代码中，-webkit-touch-callout 属性可能是none。 去掉那个或者添加下面的样式，就可以解决这个问题了

body {-webkit-touch-callout: default !important;}