I made a small application where the user can draw.
He can toggle drawing by pressing the corresponding button.
The problem is when drawing is enabled and I want to press the button again to disable it I draw behind the button, this because I start my drawing with the "onDocumentMouseDown" function.
This function is also called when I press the button.
Is there a way to control or fix this?
var button = document.getElementById( 'draw' );
button.addEventListener( 'touchstart', function ( event ) {this.toggleDrawing();}.bind(this), false );
button.addEventListener( 'click', function ( event ) {this.toggleDrawing();}.bind(this), false );
In "toggleDrawing" I change the bool for drawing to false or true.
But like I said, pressing this button also causes my program to draw.
onDocumentMouseDown(event)
{
switch(event.button)
{
case 0:
if(this.canDraw)
{
this.startPos = new THREE.Vector3(event.clientX, event.clientY,0);
this.endPos = new THREE.Vector3(event.clientX, event.clientY,0);
this.startLine();
}
break;
default:
break;
}
}
So how do I click a button and call the function of this button without executing onDocumentMouseDown?
A little difficult to understand, but I think you want to not trigger a mousedown event that is registered on the document when you click inside the button.
If so, register a mousedown handler on the button that stops propagation of that event.
button.addEventListener('mousedown', function(event) {
event.stopPropagation()
}, false);
Otherwise, you could simply exit the drawing function early if the event.target is the draw button.
onDocumentMouseDown(event)
{
if (event.target.id === "draw")
return;
// your code
}
Unrelated side note, instead of .bind() on an anonymous function, you can call it on the method itself, assuming it doesn't mind receiving the event object.
button.addEventListener('click', this.toggleDrawing.bind(this), false);
or just use an arrow function.
button.addEventListener('click', () => this.toggleDrawing(), false);
Related
I'm making a game, and there's a leaderboard. I want the user to be able to toggle the leaderboard by hitting the TAB key. Here is my code:
keysPressed = {};
if(keysPressed[KEY_TAB]){
if(leaderboard.style.display == 'none'){
$(leaderboard).fadeIn(100);
} else {
$(leaderboard).fadeOut(100);
}
keysPressed[KEY_TAB] = false;
}
document.addEventListener('keydown', (event) => {
keysPressed[event.key.toLowerCase()] = true;
}, false);
document.addEventListener('keyup', (event) => {
keysPressed[event.key.toLowerCase()] = false;
}, false);
Note: leaderboard is just document.getElementById('leaderboard')
This all works fine, but whenever I hit the tab key, the webpage (I'm using Chrome) automatically selects/deselects the URL bar. Is there a way I can prevent the TAB key from doing this, or do I need to switch to a different key? Here is an screenshot demonstrating my problem:
JavaScript is prefered, since I am rather new to jQuery, but I am willing to go either.
Thanks in advance~
Use Event.preventDefault()
From MDN :
The preventDefault() method of the Event interface tells the user
agent that if the event does not get explicitly handled, its default
action should not be taken as it normally would be.
The event continues to propagate as usual, unless one of its event
listeners calls stopPropagation() or stopImmediatePropagation(),
either of which terminates propagation at once.
As noted below, calling preventDefault() for a non-cancelable event,
such as one dispatched via EventTarget.dispatchEvent(), without
specifying cancelable: true has no effect.
document.addEventListener('keydown', (event) => {
if (event.key == "Tab") {
event.preventDefault();
}
}, false);
I made a cookie clicker using javascript and html, and at the moment I have it made so that upon clicking an image, it fires a function which increases your score. I want to make it so that instead of only being able to click the image, you can just click any button on the keyboard to fire the same function. I've only seen code to do this in an input field. I'm not sure if "document.addEventListener("keydown", function())" is what I'm looking for.
Try:
document.onkeydown = function() {
console.log('my code');
};
Edit (or):
document.onkeydown = myFn;
To listen for keypress you can add keydown event on document
document.addEventListener("keydown", callBack, false);
function callBack(e) {
var keyCode = e.keyCode;
console.log(keyCode);
}
Just assign a event handler to your event.
If you want to assign for the whole document, use this:
document.addEventListener("keydown", keyDownTextField, false);
document.getElementById("yourinput").addEventListener("keydown", keyDownTextField, false);
function keyDownTextField(e) {
console.log(e.keyCode);
}
<input id="yourinput" type="text" />
document.addEventListener('keydown', () => {
console.log('a');
});
should work.
However, some browsers don't give document focus, which is required for keydown events.
The classic approach to this (which works more universally) is to create an off-screen <input> element, and give it a blur event to regain focus when it loses it. This will force focus to always stay on that input, then it can receive key events.
const input = document.createElement('input');
input.style.position = 'absolute';
input.style.left = '-100000px';
input.addEventListener('blur', () => input.focus());
input.addEventListener('keydown', () => console.log('key down'));
document.body.appendChild(input);
input.focus();
This code:
- creates a new input element
- positions it absolutely way off the left of the screen (so it's not visible)
- adds a blur event which automatically gets focus back
- adds the keydown event itself
I have a fullscreen image slider which doesn’t have an autoplay functionality, so I had to write custom script to click on the next button.
Here it is
var interval = setInterval(function() {
document.querySelector('.fp-controlArrow.fp-next').click();
}, 7000);
setTimeout(function( ) { clearInterval( interval ); }, 44000);
But now I’d love to clearInterval whenever user clicks on the button of the same class (.fp-controlArrow.fp-next) . Can the JS distinguish the difference between simulated click and real mouse click somehow? If so, what would be the code for that?
And if not, maybe it is possible to clear interval on hovering the button with the .fp-controlArrow.fp-next class ?
Thanks!
Yes, you can distinguish between a user generated event vs a code generated event by using isTrusted property of the event object in the event listener.
var elem = document.querySelector('.fp-controlArrow.fp-next');
elem.addEventListener("click", function( event ) {
if(event.isTrusted)
clearInterval(interval);
}, false);
https://developer.mozilla.org/en/docs/Web/API/Event/isTrusted
You can use mousedown event for Real click.
var el = document.querySelector('.fp-controlArrow.fp-next')
el.addEventListener('mousedown', function(){
clearInterval( interval );
});
Working example: https://jsfiddle.net/fov47eny/
Also you can use isTrusted but it has limited support on browsers.
if (e.isTrusted) {
/* The event is trusted. */
} else {
/* The event is not trusted. */
}
I have one callback function bound to two events (change and focusout). However, I need the focusout to happen only when the element we're interacting with is not a checkbox.
This is the example code:
$(document).on('focusout change', '.selector', function() {
if ($(this).is(':checkbox')) {
// Do stuff and prevent the focusout to trigger. HOW???
}
doStuff(); // Action that applies to both cases, but needs to be limited at one execution only
});
The code above will execute twice:
When the checkbox gets checked/unchecked
When you click outside of the checkbox (lose focus (blur))
I tried using .off, but it ends up killing the focousout handler altogether, which I will need later for other elements which aren't checkboxes.
What would be the way to prevent the focusout handler to trigger for certain elements?
What you want to do is
$(document).on('focusout change', '.selector', function(event) {
event is an event object, which has properties, one of which is type. Checking the type you can now see if your function has been called because of a focusout or a change and run code as appropriate
The best way is to affect both events (or more) to the same function, like this :
A text input for example
<input id="myfield" type="text" />
Now the Javascript
var myfield = document.getElementById('myfield');
myfield.onfocus = myfield.onchange = function(e)
{
//your code
}
Yo can even add an other element
button.onclick = myfield.onkeyup = function(e)
{
//when the client press the enter key
if(e.key && e.key == "Enter")
{
//catch the target
}
//when the client click the button
else if(!e.key || e.target == button)
{
//catch the target
}
//otherwise you can do not care about the target and just execute your function
}
You must only know that you can add many elements and many events
element1.onfocus = element1.onblur = element2.onchange = element3.onchange = function(e){//your code}
I have a soundboard with buttons that trigger AJAX posts on mousedown.
The ideal functionality is to play an audio on left-mousedown and cancel playback on right-mousedown.
The code I have so far disables the context menu and cancels the playback...however, if they are over a button when they right-click (that triggers other previously defined events), it will still honor the mousedown and play that audio.
$(document).ready(function(){
document.oncontextmenu = function() {return false;};
$(document).mousedown(function(e){
if( e.which == 3 ) {
e.preventDefault();
Cancel_Playback();
return false;
}
return true;
});
});
I am trying to disable the right-mousedown from triggering the previously defined events but honor the Cancel_Playback. Any ideas?
EDIT
Updated Title and Description to more accurately reflect what I am trying to accomplish. This should also help: http://jsfiddle.net/g9sh1dme/15/
stopImmediatePropagation is probably the function you're looking for.
It cancels all other events bound to the the same element and any other delegates higher in the DOM. Order also matters as events are called in the order in which they were bound. You can only cancel events that were bound after the event doing the canceling.
I'm not sure if these changes maintain the validity of your program, but it demonstrates the function's use. Otherwise, I'd just check for right-mousedown in Play_Sound and exit out instead of banking on another event to cancel its execution.
Live Demo
$(document).ready(function(){
document.oncontextmenu = function() {return false;};
//For this to work you must bind to the same object or you must bind to something lower in the DOM.
$(".sound").mousedown(function(e){
if( event.which == 3 ) {
Cancel_Playback();
e.stopImmediatePropagation();
return false;
}
return true;
}).mousedown(Play_Sound);
})
function Cancel_Playback() {
alert("This is all that should be displayed on right-mousedown")
}
function Play_Sound() {
alert("Display this on left-mousedown... but not on right-mousedown")
}