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>
Related
This happens very rarely but it still happens sometimes. I have two buttons next to each others with a jQuery click event on each:
JS:
$("#accepttrade").click(function(){
if(document.getElementById("agreeterms").checked ){
//accept process
$("#acceptdeposit").slideUp(200);
}
});
$("#declinetrade").click(function(){
//decline
$("#acceptdeposit").slideUp(200);
});
HTML:
<div id="acceptdeposit">
<button id="declinetrade" >Decline</button>
<button id="accepttrade" >Accept</button><input type="checkbox" id="agreeterms">
</div>
But sometimes when someone click on decline, it occurs the click of accept button, and go through even if the checkbox is unchecked.
I have never experienced it myself, but is it possible that this could happend? How can I be sure that "accept process" is never reached unless the user checks the box and click on accept?
Try this, cancel your click event:
$("#accepttrade").click(function(e){
if($("#agreeterms").is(':checked') ){
//accept process
$("#acceptdeposit").slideUp(200);
}
e.preventDefault();
});
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
Here is my alloy code - snippet:
<RightNavButton>
<Button id="btnRight" onClick="rightButtonClicked" />
</RightNavButton>
JS:
//edit profile button
function rightButtonClicked(e) {
Ti.API.info("testing bubble ");
//TODO: add functionality here
e.cancelBubble = true;
}
The event still bubbles. Normal buttons this works fine.
Thanks
Update:
<RightNavButton>
<Button id="btnRight" title='Chat' onClick="rightButtonClicked" bubbleParent='false'/>
</RightNavButton>
Still bubbles. i.e. if I click on that multiple times, it keeps on opening windows. Rather then wait for event to finish and then fire again.
Try
e.stopImmediatePropagation();
you should used bubbleParent property over the button, set it to false it will work. Here is the documentation
I have an input text box and a button on a page.
have an onchange event on the text box and an onclick on the button. Each event triggers a totally separate unrelated method.
The problem is as follows:
if the user makes changes to the text box, then right away goes to click on the button - the onchange is triggered but I lose the onclick.
can I avoid this? I need both events to happen.
Thanks
Updated:
I tried a very simple test locally:
<input type="text" onchange="alert1();"/>
<input type="button" onclick="alert2();"/>
where the js is :
<script type="text/javascript">
function alert1()
{
alert("1");
}
function alert2()
{
alert("2");
}
</script>
changing the text and right away clicking on the button only triggers the first event. Is there a way to force the second event to happen?
An alert (along with other modal dialogs) is a bit of a special case, since it suspends execution of the remainder of the script until the user clicks OK. This is why your second handler falls through the cracks.
If you did something like document.write('foo') in your handlers instead, you wouldn't have this problem.
Try this,
function showAlert1() {
setTimeout(function(){ alert("ONE") }, 250);
}
function showAlert2() {
setTimeout(function(){ alert("TWO") }, 250);
}
It buffers the execution of each function so that the button's onclick can be triggered.
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>