javascript - 仅在 AngularJS 中禁用左键单击焦点事件

Question

我有一个 Angular 带日期选择器，我只想在右键单击时显示。

我想对默认的 focus() 方法进行此操作，因为一旦它变得模糊，这对于关闭它很方便。为了在 DIV 等任何元素上使用 focus 方法，我添加了一个 tabindex。

问题是，我似乎无法仅在左键单击时禁用焦点。它要么被完全禁用，要么对两者都有效。

我已经阻止右键单击时显示上下文菜单。

directives.directive('ngRightClick', ["$parse", function($parse) {
  return function(scope, element, attrs) {
    var fn = $parse(attrs.ngRightClick);
    element.bind('contextmenu', function(event) {
        scope.$apply(function() {
            event.preventDefault();
            fn(scope, {$event:event});
        });
    });
  };
}])

对于左键单击，我已经尝试过 preventDefault()，但这实际上不起作用。然后我尝试在点击时对其进行模糊处理，这很有效，但焦点事件仍会事先调用，持续几分之一秒。

directives.directive('ngLeftNofocus', ["$parse", function($parse) {
  return function(scope, element, attrs) {
    var fn = $parse(attrs.ngLeftNofocus);
    element.bind('click', function(event) {
        scope.$apply(function() {
            event.preventDefault();
            element[0].blur();
        });
    });
  };
}])

这些都可以在 Plnkr 中找到:http://plnkr.co/edit/T2YBYwfqSLKxCUL0ITgk?p=preview

我知道有一些解决方案可以防止在此站点上使用 jQuery 获得焦点，但我需要它以某种方式在右键单击时保持事件状态。

或者，如果有人有更好的方法来仅在右键单击时触发日期选择器(一旦用户单击其他任何地方它也会关闭)，我也很想看看。

Answer 1

您可以使用 bs-show 属性手动切换日期选择器。

结合 ng-right-click 和 ng-blur，它会给出你想要的。

<div bs-datepicker ng-model="test" tabindex="1"
    data-trigger="manual"
    bs-show="showDatePicker"
    ng-blur="showDatePicker = false"
    ng-right-click="showDatePicker = true">CLICK HERE</div>

示例 Plunker: http://plnkr.co/edit/zJXdZOIZ9XQey3BkQ3I2?p=preview