Question

我有一个棱角分距的日期选择器，我只想在右键单击时显示。

这个我想做的是默认的focus（）方法，因为这样一旦它模糊就可以方便地关闭它。要在像DIV这样的任何元素上使用焦点方法，我添加了一个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

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

1 个答案: