With Vue.js 2 when I add in an #click event to an element and attempt to click something, the event isn't triggered until after I have completed my click (press down -> up).
How do I trigger an event immediate after a mouse click down?
Example:
<div #click="foo()">
Hello
</div>
You can simply use #mousedown event on the element, just like #click, to handle the mousedown event.
<button #mousedown="mouseDown">
mouseDown
</button>
See working fiddle: https://fiddle.jshell.net/mimani/feL03wgd/
Related
I'm building an autocomplete component which is loaded dynamically from the parent using
<div>
<input type="text"
:placeholder="myResources.Placeholder" #input="onChange" #keyup.down="onArrowDown" #keyup.up="onArrowUp" #keyup.enter.prevent="onEnter($event)" #blur="onBlur"v-model="search" />
<ul id="autocomplete-results" v-show="isOpen" class="autocomplete-results">
<li class="loading" v-if="isLoading">
Loading results...
</li>
<li v-else v-for="(result, i) in results" :key="i"
#click="setResult(result)" #mouseover="onMouseOver(i)"
class="autocomplete-result" :class="{ 'is-active': i === arrowCounter }">
{{ result }}
</li>
</ul>
</div>
Basically when the user starts typing a list of search results shows up, and they can select between the results using the up and down arrow keys, and then confirm their choice by pressing enter (or they can use the mouse).
Problem is, the component is placed inside a tag in the parent. And pressing Enter submits the form. I have tried catching the event, using
#keyup.enter.prevent="onEnter($event)"
or calling event.preventDefault() in the event handler. None of this works. Breaking inside the event handler, I found out that the submit on the form happens before the handler is triggered. I thought maybe the event originates on the or elements, but when I stick event handlers on them, they don't get called.
How do I tell the parent "don't submit" and actually have it listen?
As I mentioned, the component is rendered dynamically inside a parent. The problem
In your onArrowUp and onArrowDown functions, you should focus() the child component. That way, the Enter key is definitely called on the child item.
From there, change your #keyup.enter.prevent to #keyup.enter.stop to stop event propagation back up to the parent.
My element looks like this:
<div id="searchBarFilters">
<div class="filterBox">
<div class="col-xs-12">
<h3>Adjust Filters<span ng-click="closeGlobalFilters()" class="icon-close"></h3>
<hr/>
When the user clicks on this close icon, the particular div panel visibility is hidden. I am checking this functionality using protractor as below:
browser.driver.findElement(by.css('span[ng-click*="closeGlobalFilters()"][class="icon-close"]')).click();
I had to use both the attributes of span tag because there are 2 other elements with the same className.
The above code is not showing any error but I do not see the click action eing executed in action.
What am I missing here? Thanks in advance for your help.
i use https://angular.io/guide/dynamic-form angular dynamic form. How is it possible to intercept the click event on every input field of the web page? I tried
<pre>
<df-question [question]="question" [form]="form" ng-
click="onContainerClick($event);"></df-question>
</pre>
Thank you
Instead of applying the click to the tag, just in your DynamicFormQuestionComponent (df-question) add click event on the input field (code taken from the docs)
HTML:
<input (click)="onContainerClick($event)" *ngSwitchCase="'textbox'"
[formControlName]="question.key"
[id]="question.key" [type]="question.type">
BTW, you were using ng-click which is not Angular, but AngularJS.
TS:
onContainerClick(event) {
console.log('clicked')
}
DEMO (check console) https://plnkr.co/edit/MbwuhWJrJOwuW23ZbzsC?p=preview
I have a simple project which has a button and an image. The image shows when pressing the button. But the image shows with delay about 1000ms.
On the browser, there aren't any problems.
and these are the codes
<span (click)="getImage()">Click it!</span>
<img src="assets/{{img}}" *ngIf="img" alt="">
img = "";
getImage(){
this.img = "aa.jpg";
}
To remove this delay, you can add the tappable attribute to your element.
<div tappable (click)="doClick()">I am clickable!</div>
Source: Click Delays
In general, we recommend only adding (click) events to elements that
are normally clickable. This includes and elements. This
improves accessibility as a screen reader will be able to tell that
the element is clickable.
However, you may need to add a (click) event to an element that is not
normally clickable. When you do this you may experience a 300ms delay
from the time you click the element to the event firing.
I have tag with ng-click in another tag with ng-click. when i click on the internal tag, its start the two function instead of only internal function. example:
<div ng-click="gotoChat()" >
<i class="icon" ><button ng-click="Close()" class="button button-assertive">סגור בקשה</button></i>
</div>
When I click on the button tag, its start gotoChat() and Close() instead of only Close(). How can I fix it?
Couple of Things:
1) You are using Ionic2/Angular2 so you should use (click) event and ion-button (for RC release)
<div (click)="gotoChat()">
<i class="icon"><button ion-button (click)="Close($event)" class="button button-assertive">Name</button>
</div>
2) What you are looking for is $event.stopPropagation(). Call it on your nested event to keep the event from bubbling up. So, like this:
Close($event) {
$event.stopPropagation();
// handle event
}
Make sure to pass the $event object to the function you wish to call stopPropagation() on