I'm learning Javascript. I noticed that if I click on an object multiple times, quickly, some clicks are captured as double clicks. Is it possible to capture all clicks in Javascript as single clicks only?
Thanks
Using jQuery, you could create a double click event handler on the document and then prevent that default behavior:
$(document).dblclick(function(e) {
e.preventDefault();
alert('Handler for .dblclick() called and ignored.');
});
Double click in the example to see the result.
There are two options to solve this problem.
1) Using "return false;" statement on double click event.
Example:
<button id="your button id" onclick="yourfuntion()" ondblclick="return false;" >My Button</button>
2) Disable the button/object in the start of your main function and in the end of the function enable it again.
Example:
<button id="your button id" onclick="yourfuntion()">My Button</button>
<script>
function yourfuntion() { document.getElementById("your button id").disabled = true;
//your javascript code
document.getElementById("your button id").disabled = false;}
</script>
Related
Thanks for any help with this. Basically I have a stop button on a timer - and I need to have it be activated via a key press instead of or in addition to being able to click it with mouse. I've tried a few different ways using document.addeventlistener for example but nothing I have done has worked. Below is the relevant HTML/JS. Can anyone point me in the right direction of how I should best go about this? For example ideally I will press a number on the num pad to stop my counter. I'm not sure how to separate the two lines of code in the block format wise below, but just know button is in its proper html tags and the stop button is within script tags.
Thank you
<button id="stop" class="btn btn-danger">STOP</button>
/* Stop button */
stop.onclick = function() {
clear = true;
start.disabled = false;
stop.disabled = true;
}
Here, I created an example for the keydown event. Use tab key navigate to stop button and then press enter key it will get disabled.
document.getElementById("stop").addEventListener("keypress", stopTimer, false);
function stopTimer() {
document.getElementById("stop").setAttribute('disabled', true);
}
<button id="stop">STOP</button>
For the button element, click event has triggered on both, click and keypress as you can see below (this happen when you press spacebar or return, with another key just trigger keypress event); but on anyway you can set more than one event on your element.
document.getElementById("stop").addEventListener("click",function(){
console.log('Clicked!');
});
document.getElementById("stop").addEventListener("keypress",function(){
console.log('Keypressed!');
});
<button id="stop">Stop!</button>
if you need no-mouse interaction, you have to focus the element...
document.getElementById("stop").addEventListener("click",function(){
console.log('Clicked!');
});
document.getElementById("stop").addEventListener("keypress",function(){
console.log('Keypressed!');
});
document.getElementById("stop").focus();
<button id="stop">Stop!</button>
I have an application that already in use.
I need to add few hotkeys to it like Enter should trigger some already existing Button.Click events.
It has multiple forms.
1st form has
<button name="Search" type="button" class="abc" disabled>Search</button>
2nd on has
<button type="button" class="xyz" id="show" ">Show</button>
3rd ....
The button click events are in a .js file
$('body').on('click', '#search-form button[name=Search]', function () {
//implementaion
});
$('body').on('click', '#Show-Change', function () {
//implementaion
});
Now when I am using the Search form , its has multiple drop-downs to be selected.
When I press enter the Search.Click should be triggered (should behave same as when I click on the SEARCH button), when I am using the 2nd form the show, the click event should trigger.
The first form is like a menu form on the left side of the form. The second one is a popup form. I am new to .js and need help. I need to implement these on couple of similar forms in the application.
$(document).keypress(function (e) {
if (e.which == 13) {
$('#search-form button[name=Search]').click();
}
});
But this works only for the search.click button, and is triggered whenever Enter is pressed, irrespective of the form I am on.
Not sure how to make it generic enough to handle this on every form that needs enter as a Hotkey.
It seems disabled button "onclick" function is still fired when triggering it programmaticaly, eg:
<div>
<input type="button" onclick="save()" id="saveButton" value="save" disabled="disabled" />
<input type="button" onclick="byPassDisabled()" value="bypass disabled button"/>
<div id="counter">0</div>
function save(){
var count = parseInt($('#counter').html());
$('#counter').html(++count);
}
function byPassDisabled(){
$('#saveButton').click();
}
see http://jsfiddle.net/WzEvs/363/
In my situation, keyboards shortcuts are bound to functions triggering the ".click()" on buttons. I'll find it very annoying to have to disable the shorcuts or check if the button is disabled myself. I'd prefer a general solution fixing this problem.
But why? This behavior doesn't seem fair to me.
Any workaround?
The attribute only disables user interaction, the button is still usable programmatically.
So yeah, you gotta check
function byPassDisabled(){
$('#saveButton:enabled').click();
}
Alternatively don't use inline handlers.
$(document).on('click', '#saveButton:enabled', function(){
// ...
});
For future use...the OP code works because jQuery will still call it's own handlers even if the DOM element is disabled. If one were to use vanilla javascript, the disabled attribute would be honored.
const element = document.getElementById('saveButton');
element.click() //this would not work
You can programmatically trigger click on a disabled button.
There are ways to find if the event is a click on button by user or it has been trigger programmatically. http://jsfiddle.net/WzEvs/373/
$(function () {
$("#saveButton").on('click', function (e) {
if (!e.isTrigger) {
var count = parseInt($('#counter').html());
$('#counter').html(++count);
}
});
$("#bypassButton").on('click', function (e) {
$("#saveButton").click();
});
});
e.isTrigger is true if you call the click() programmatically. Basically you are triggering the click event manually in code.
You can trigger click still although made it disable .As Spokey said it just shows the user-interaction(the usability still persists that can be turned on programmatically) .
off or unbind the click will solve this issue.
Thanks
I have built a fairly complex form which includes a hidden section that the user can toggle open for entering more information if necessary. However, when you click on this toggle button labeled I have more Nativities, it triggers the submit button and prematurely submits the form.
The form is in dev right now, but it can be found here.
The code I am using for the toggle button is:
<script type="text/javascript">
$(function() {
$("#schedule").accordion({ header: "h5", collapsible: true });
$("#more-nativities").hide();
$("#toggle").click(function() {
$("#more-nativities").slideToggle("slow");
});
});
</script>
The code for the submit button is pretty basic:
<input id="submit2" type="image" src="_images/btn_register.jpg" name="submit" alt="" onmouseover="javascript:this.src='_images/btn_register2.jpg'" onmouseout="javascript:this.src='_images/btn_register.jpg'"/>
The code for the toggle button is:
<button id="toggle">I have more nativities</button>
Any ideas as to why the toggle button is triggering the submit? And more importantly how to solve the problem?
Thanks!
Try adding a type, i.e.:
<button type="button" id="#toggle">Text</button>
http://www.w3schools.com/tags/tag_button.asp says this should be always defined. It's possible the browser is defaulting to a submit button.
Esteban has one solution. A better one is described in the jQuery tutorial:
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
Try
return false;
after the slide toggle on the click function fro the toggle button.
From W3Schools:
Always specify the type attribute for
the button. The default type for
Internet Explorer is "button", while
in other browsers (and in the W3C
specification) it is "submit".
http://www.w3schools.com/tags/tag_button.asp
Be sure to specify type="button"
I have a simple search page with a single input box.
I want to be able to trigger the search action either by clicking "Go" or by pressing Enter in the input box. I did it like this:
$("input[name='entry']").keyup(function (event) {
if (event.keyCode == 13) {
search_phone();
}
});
$('a#go').click(function () {
search_phone();
});
Is there a more elegant way to do this? Like with bind and trigger, or fling. If so, how?
Not much can you improve here. Your code is pretty good.
You could skip the anonymous function for the click event.
$('a#go').click(search_phone);
I would just make your "go" link the submit button
<input type="submit" name="submit" value="go"/>
And then just bind your function to the submit (which would happen either from pressing enter while in the text box or by clicking the go button.
$('#my_form').submit(search_phone);