Disable focus event on left click only in AngularJS

Question

I have an angular-strap datepicker that I only want to show on right click.

This I want to do over the default focus() method, as this is convenient for closing the thing once it blurs. To use the focus method on any element like a DIV, I added a tabindex.

The problem is, I can't seem to be able to disable the focus on the left click only. It's either disabled completely, or working for both.

I've already prevented the context menu to show on right click.

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});
        });
    });
  };
}])

For the left click, I've tried preventDefault(), but that doesn't really work. Then I've tried to blur it on click, which works, but the focus event is still called beforehand, for a fraction of a second.

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();
        });
    });
  };
}])

This can all be found in a Plnkr: http://plnkr.co/edit/T2YBYwfqSLKxCUL0ITgk?p=preview

I know there are some solutions to prevent the focus using jQuery on this site, but I need it to stay active for the right click somehow.

Alternatively, if someone has a better way to trigger the datepicker on right click only (that it also closes once the user clicks anywhere else), I'd love to look at that too.

Thanks, for the directive ngLeftNofocus. I have adapted it for prevent focus on input. directives.directive('preventFocus', ["$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(); }); }); }; }]) — mggSoft
– mggSoft, Commented Jul 24, 2015 at 8:46

runTarm · Accepted Answer · 2014-08-09 09:56:25Z

1

You could use bs-show attribute to toggle the datepicker manually.

Combined with the ng-right-click and ng-blur, it will give what you want.

<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>

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

answered Aug 9, 2014 at 9:56

runTarm

11.6k1 gold badge39 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Disable focus event on left click only in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related