AngularJS: ng-click and select text

Question

In my app i'm using some logic after my element was clicked.

For example:

html

<h3 ng-click="showAlert('text')">this is text! (try to click and select)</h3>

js

$scope.showAlert = function(text) {
  console.log('click!');
};

and when i click on element: all is ok. All done, as was expected.

But!

Why, when i try to select text, my event is fired too?

how to skip select event?

plunker: click

There is no separate event for selection - so click will trigger anyway. You can make some checks on current selection, etc.etc. But I feel all this will hardly works good. Btw, clicking text is so unnatural behavior... — Petr Averyanov
– Petr Averyanov, Commented Nov 10, 2015 at 13:28
@PetrAveryanov for example toggling of editor (as jira do) — byCoder
– byCoder, Commented Nov 10, 2015 at 13:30

Xlander · Accepted Answer · 2015-11-10 13:23:33Z

4

You can get the time between a mousedown and a mouseup to determine if it's a click or the text is being selected.

Like so: Demo

(function(){
  angular.module("app", []);

  angular.module("app")
  .directive("noclick", function(){
    return {
      restrict: "A",
      link: function(scope, element, attr){
        scope.time= Date.now();

        element.on("mousedown mouseup", function(e){
          if(e.type == "mousedown"){
            scope.time= Date.now();
          }

          if(e.type == "mouseup"){
            if(Date.now() - scope.time> 300){
              return false;
            }else{
              console.log("clicked");
            }
          }
        });
      }
    }
  });
})(window, angular);

Note: I'm using a directive for this case.

answered Nov 10, 2015 at 13:23

Xlander

1,33112 silver badges24 bronze badges

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

9 Comments

Maxim Shoustin Over a year ago

i would set 100 msec, anyways +1

Petr Averyanov Over a year ago

and if I press mouse button slowly -> no click ( may be u want to compare coordinates also... Smells bad anyway)

Xlander Over a year ago

@MaximShoustin, Yes, I was using 300 in canvas game, 100 is better for this case though. Thanks.

Xlander Over a year ago

@PetrAveryanov, how slowly?

Deminetix Over a year ago

This is really clean but a more robust version would be to check mouse movement instead of time. This way click works the way it does everywhere else.

|

Collectives™ on Stack Overflow

AngularJS: ng-click and select text

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related