Styjun

Short story written from alien perspective with this line: "It's too bright to look at, so they don't"

I wrote a scene that the majority of my readers loved. How do I get back to that place while writing my new book?

California: "For quality assurance, this phone call is being recorded"

What are the words for people who cause trouble believing they know better?

Movie where a boy is transported into the future by an alien spaceship

What is the purpose of building foundations?

Bent spoke design wheels — feasible?

What happens to foam insulation board after you pour concrete slab?

Convert camelCase and PascalCase to Title Case

Secure offsite backup, even in the case of hacker root access

When writing an error prompt, should we end the sentence with a exclamation mark or a dot?

Linux tr to convert vertical text to horizontal

Align text within align

What is the history of the check mark / tick mark?

Do adult Russians normally hand-write Cyrillic as cursive or as block letters?

What is a simple, physical situation where complex numbers emerge naturally?

Comma Code - Ch. 4 Automate the Boring Stuff

You've spoiled/damaged the card

How could a possessed body begin to rot and decay while it is still alive?

Traffic law UK, pedestrians

The ring of global sections of a regular scheme

How bad would a partial hash leak be, realistically?

Shrink exponential fraction argument

Is there any rule preventing me from starting multiple bardic performances in a single round?

Angular 7 - Not to trigger (click) function on dragging

What's the difference between a method and a function?var functionName = function() vs function functionName() Set a default parameter value for a JavaScript functionWhat does the exclamation mark do before the function?OpenLayers.Control.Button's trigger parameter won't get calledError in drag action in IE while triggering the mouse up event in scriptJquery how to trigger click event on href elementclick handler in marker using openlayerCan't drag a map when clicking on a feature in a vector layerjQuery click events firing multiple times

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

I have a div with an openlayers map like this:

<div id="map" (click)="getInfo($event)" class="map"></div>

I use dragging with my mouse to navigate around the map, and every time I do that the getInfo function triggers. I just want it to trigger when I single click the map, not when I navigate.

Is it possible? Thanks!

angular function triggers click openlayers

share|improve this question

edited Mar 24 at 16:18

Iñigo

asked Mar 24 at 13:22

IñigoIñigo

295

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Trying setting an OpenLayers listener on the map object e.g. this.map.on('singleclick', getinfo); instead of using the div.
  
  – Mike
  Mar 24 at 13:53
  

  
  
  
  

add a comment | 

0

I have a div with an openlayers map like this:

<div id="map" (click)="getInfo($event)" class="map"></div>

I use dragging with my mouse to navigate around the map, and every time I do that the getInfo function triggers. I just want it to trigger when I single click the map, not when I navigate.

Is it possible? Thanks!

angular function triggers click openlayers

share|improve this question

edited Mar 24 at 16:18

Iñigo

asked Mar 24 at 13:22

IñigoIñigo

295

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Trying setting an OpenLayers listener on the map object e.g. this.map.on('singleclick', getinfo); instead of using the div.
  
  – Mike
  Mar 24 at 13:53
  

  
  
  
  

add a comment | 

I have a div with an openlayers map like this:

<div id="map" (click)="getInfo($event)" class="map"></div>

I use dragging with my mouse to navigate around the map, and every time I do that the getInfo function triggers. I just want it to trigger when I single click the map, not when I navigate.

Is it possible? Thanks!

angular function triggers click openlayers

share|improve this question

edited Mar 24 at 16:18

Iñigo

asked Mar 24 at 13:22

IñigoIñigo

295

<div id="map" (click)="getInfo($event)" class="map"></div>

angular function triggers click openlayers

angular function triggers click openlayers

share|improve this question

edited Mar 24 at 16:18

Iñigo

asked Mar 24 at 13:22

IñigoIñigo

295

share|improve this question

edited Mar 24 at 16:18

Iñigo

asked Mar 24 at 13:22

IñigoIñigo

295

asked Mar 24 at 13:22

IñigoIñigo

295

asked Mar 24 at 13:22

IñigoIñigo

295

2 Answers
2

active

oldest

votes

0

https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event

click fires after the mousedown and mouseup events, in that order.

You will probably have to create mousedown and mouseup handlers that set some sort of time interval.

mousedown will start some timer... ie 200ms, and if a mouseup event gets fired within that interval, you can treat it as a click and call getInfo with the event passed to mouseup

if mouseup event gets fired outside of that interval, assume it's a drag'n'drop mouse action and ignore it.

@ViewChild('map') mapElem: ElementRef;

ngAfterViewInit() 
 const mousedown$ = fromEvent(this.mapElem.nativeElement, 'mousedown');

 const mouseup$ = fromEvent(this.mapElem.nativeElement, 'mouseup');

 mousedown$.subscribe(e => 
 const clickTimer$ = timer(200);
 mouseup$.pipe(takeUntil(clickTimer$)).subscribe(e => this.getInfo(e));
 );


getInfo(e) 
 console.log('click')

https://stackblitz.com/edit/angular-sobuqt

check the console output on this demo I made, you'll see the behavior you want.

share|improve this answer

edited Mar 24 at 13:57

answered Mar 24 at 13:31

Joshua BrokawJoshua Brokaw

414

add a comment | 

0

You can make use of a combination of click and mousedown event bindings to handle this situation. This prevents the click event from being fired if you are dragging your map.

<div id="map" (mousedown)="check($event)" (click)="getInfo($event)" class="map"></div>

On your .ts code,

click: boolean = false;

check() 
 window.setTimeout(this.startCheck(), 1000);


startCheck() 
 this.click = true;


getInfo(event) 
 if (this.click) 
 // handle the real click event
 

share|improve this answer

answered Mar 24 at 14:48

user10997785

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55324238%2fangular-7-not-to-trigger-click-function-on-dragging%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event

click fires after the mousedown and mouseup events, in that order.

You will probably have to create mousedown and mouseup handlers that set some sort of time interval.

mousedown will start some timer... ie 200ms, and if a mouseup event gets fired within that interval, you can treat it as a click and call getInfo with the event passed to mouseup

if mouseup event gets fired outside of that interval, assume it's a drag'n'drop mouse action and ignore it.

@ViewChild('map') mapElem: ElementRef;

ngAfterViewInit() 
 const mousedown$ = fromEvent(this.mapElem.nativeElement, 'mousedown');

 const mouseup$ = fromEvent(this.mapElem.nativeElement, 'mouseup');

 mousedown$.subscribe(e => 
 const clickTimer$ = timer(200);
 mouseup$.pipe(takeUntil(clickTimer$)).subscribe(e => this.getInfo(e));
 );


getInfo(e) 
 console.log('click')

https://stackblitz.com/edit/angular-sobuqt

check the console output on this demo I made, you'll see the behavior you want.

share|improve this answer

edited Mar 24 at 13:57

answered Mar 24 at 13:31

Joshua BrokawJoshua Brokaw

414

add a comment | 

0

https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event

click fires after the mousedown and mouseup events, in that order.

You will probably have to create mousedown and mouseup handlers that set some sort of time interval.

mousedown will start some timer... ie 200ms, and if a mouseup event gets fired within that interval, you can treat it as a click and call getInfo with the event passed to mouseup

if mouseup event gets fired outside of that interval, assume it's a drag'n'drop mouse action and ignore it.

@ViewChild('map') mapElem: ElementRef;

ngAfterViewInit() 
 const mousedown$ = fromEvent(this.mapElem.nativeElement, 'mousedown');

 const mouseup$ = fromEvent(this.mapElem.nativeElement, 'mouseup');

 mousedown$.subscribe(e => 
 const clickTimer$ = timer(200);
 mouseup$.pipe(takeUntil(clickTimer$)).subscribe(e => this.getInfo(e));
 );


getInfo(e) 
 console.log('click')

https://stackblitz.com/edit/angular-sobuqt

check the console output on this demo I made, you'll see the behavior you want.

share|improve this answer

edited Mar 24 at 13:57

answered Mar 24 at 13:31

Joshua BrokawJoshua Brokaw

414

add a comment | 

https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event

click fires after the mousedown and mouseup events, in that order.

You will probably have to create mousedown and mouseup handlers that set some sort of time interval.

mousedown will start some timer... ie 200ms, and if a mouseup event gets fired within that interval, you can treat it as a click and call getInfo with the event passed to mouseup

if mouseup event gets fired outside of that interval, assume it's a drag'n'drop mouse action and ignore it.

@ViewChild('map') mapElem: ElementRef;

ngAfterViewInit() 
 const mousedown$ = fromEvent(this.mapElem.nativeElement, 'mousedown');

 const mouseup$ = fromEvent(this.mapElem.nativeElement, 'mouseup');

 mousedown$.subscribe(e => 
 const clickTimer$ = timer(200);
 mouseup$.pipe(takeUntil(clickTimer$)).subscribe(e => this.getInfo(e));
 );


getInfo(e) 
 console.log('click')

https://stackblitz.com/edit/angular-sobuqt

check the console output on this demo I made, you'll see the behavior you want.

share|improve this answer

edited Mar 24 at 13:57

answered Mar 24 at 13:31

Joshua BrokawJoshua Brokaw

414

@ViewChild('map') mapElem: ElementRef;

ngAfterViewInit() 
 const mousedown$ = fromEvent(this.mapElem.nativeElement, 'mousedown');

 const mouseup$ = fromEvent(this.mapElem.nativeElement, 'mouseup');

 mousedown$.subscribe(e => 
 const clickTimer$ = timer(200);
 mouseup$.pipe(takeUntil(clickTimer$)).subscribe(e => this.getInfo(e));
 );


getInfo(e) 
 console.log('click')

share|improve this answer

edited Mar 24 at 13:57

answered Mar 24 at 13:31

Joshua BrokawJoshua Brokaw

414

answered Mar 24 at 13:31

Joshua BrokawJoshua Brokaw

414

answered Mar 24 at 13:31

Joshua BrokawJoshua Brokaw

414

<div id="map" (mousedown)="check($event)" (click)="getInfo($event)" class="map"></div>

click: boolean = false;

check() 
 window.setTimeout(this.startCheck(), 1000);


startCheck() 
 this.click = true;


getInfo(event) 
 if (this.click) 
 // handle the real click event
 

<div id="map" (mousedown)="check($event)" (click)="getInfo($event)" class="map"></div>

click: boolean = false;

check() 
 window.setTimeout(this.startCheck(), 1000);


startCheck() 
 this.click = true;


getInfo(event) 
 if (this.click) 
 // handle the real click event
 

<div id="map" (mousedown)="check($event)" (click)="getInfo($event)" class="map"></div>

click: boolean = false;

check() 
 window.setTimeout(this.startCheck(), 1000);


startCheck() 
 this.click = true;


getInfo(event) 
 if (this.click) 
 // handle the real click event
 

<div id="map" (mousedown)="check($event)" (click)="getInfo($event)" class="map"></div>

click: boolean = false;

check() 
 window.setTimeout(this.startCheck(), 1000);


startCheck() 
 this.click = true;


getInfo(event) 
 if (this.click) 
 // handle the real click event