This question already has answers here:
Detect left mouse button press
(5 answers)
Closed 2 years ago.
I have some popups and now they close if i press any mouse button. I need only left mouse to press and close popup
And the 2nd one question. Why esc popup code doesnt work??
const overlayClose = (evt) => {
if (evt.target.classList.contains('popup_active')) {
togglePopup(evt.target);
}
}
editPopup.addEventListener('mousedown', (evt) => {
overlayClose(evt);
});
addPopup.addEventListener('mousedown', (evt) => {
overlayClose(evt);
});
imagePopup.addEventListener('mousedown', (evt) => {
overlayClose(evt);
});
//popup esc code
function togglePopup(popup) {
popup.classList.toggle('popup_active');
if (popup.classList.contains('popup_active')) {
document.addEventListener('keydown', closeEscape);
} else {
document.removeEventListener('keydown', closeEscape);
}
}
const closeEscape = (evt) => {
if (evt.key === "Escape") {
popup.classList.remove('popup_active');
}
}
Here's useful docs about mouse click events
https://www.w3schools.com/jsref/event_button.asp
You can add event listener on 'mousedown' event and check if event.button equals 0.
UPD
You simply need to add if condition in your event handlers
editPopup.addEventListener('mousedown', (evt) => {
if (evt.button === 0) {
overlayClose(evt);
}
});
Related
This question already has answers here:
CSS/HTML Modal- Using the Escape key/Click outside to close
(2 answers)
Closed 1 year ago.
I have some code that opens and closes a window. This window has a search bar (input) that gets focus when the window is opened. Closing by pressing Esc only works when the focus is on the input. When there is no focus, Esc does not work. Why?
const btn = document.querySelector('.header-left__search-btn'),
body = document.body,
search = document.querySelector('.search'),
searchInput = document.querySelector('#search__input'),
btnClose = document.querySelector('.search__closed-icon');
function searchOpen() {
btn.addEventListener('click', () => {
body.classList.add('is-search-open');
setTimeout(() => {
searchInput.focus();
}, 300);
if (body.classList.contains('is-head-open')) {
body.classList.remove('is-head-open');
}
});
search.addEventListener('keydown', (e) => {
if(e.code === "Escape" && body.classList.contains('is-search-open')) {
body.classList.remove('is-search-open');
}
});
btnClose.addEventListener('click', function () {
body.classList.remove('is-search-open');
});
}
searchOpen();
This is because you bound your event to the html element with the class .search (Which I guess is your input field).
If you want to intercept the ESC button no matter what is focused, add your keydown event listener to document.
My iframe game is reading the keyboard including space, but on some browsers (Firefox, Safari) pressing Space also scrolls my page down, that causes my game to partially go out of screen. Sometimes it seems the page even scrolls back up when some other keys are pressed...
My game handles keypresses on "keyup" event.
input.addEventListener("keyup", function (e) {
//game handles all keys including space here
}
Because of using keyup event, this answer is not suitable to prevent space ;
Pressing spacebar scrolls page down?
If I add this code, my game does not receive keyup events:
window.onkeydown = function(e) {
return !(e.keyCode == 32);
};
When I add this code above to parent html page, having ifreme, it only works if keyboard focus is clicked to parent html. When focus is inside iframe, the code does not work.
It seems above code fixed issue for Safari!
The onkeypress event fires the browser scrolling. You can call preventDefault in this event, and the keyup and keydown events will continue to fire as intended.
window.onkeypress = function(e) {
if (e.keyCode == 32) {
e.preventDefault();
}
};
window.onkeyup = function(e) {
console.log("Space key up!")
};
You need preventDefault
window.addEventListener('keydown', (e) => {
if (e.keyCode === 32) {
e.preventDefault();
}
});
See this codepen for a demo: https://codepen.io/xurei/pen/MWyveEp
You have to find the right window object first
function getIframeWindow(iframe_object) {
var doc;
if (iframe_object.contentWindow) {
return iframe_object.contentWindow;
}
if (iframe_object.window) {
return iframe_object.window;
}
if (!doc && iframe_object.contentDocument) {
doc = iframe_object.contentDocument;
}
if (!doc && iframe_object.document) {
doc = iframe_object.document;
}
if (doc && doc.defaultView) {
return doc.defaultView;
}
if (doc && doc.parentWindow) {
return doc.parentWindow;
}
return undefined;
}
var myFrame = document.getElementById('targetFrame');
var frame_win = getIframeWindow(myFrame);
and then add the listeners to stop the spacebar event from bubbling up.
if (frame_win) {
var preventSpace = (e) => {
if (e.keyCode === 32) {
e.preventDefault();
}
};
frame_win.addEventListener('keydown', preventSpace);
frame_win.addEventListener('keyup', preventSpace);
frame_win.addEventListener('keypress', preventSpace);
}
I have a fly-out menu on my website, that closes when the user clicks away (anywhere else on the page) using an event listener. I would like to do the same but for accessible user for when they tab away from the fly-out menu. Any help doing this would be appreciated.
configure() {
window.addEventListener('resize', debounce(this.resize.bind(this), 300));
window.addEventListener('blur', () => once(window, 'focus', this.resize.bind(this)));
this.more_btn.addEventListener('click', () => {
if (this.more_list.classList.contains('hidden')) {
setTimeout(() => {
once(window, 'click', () => {
this.container.classList.remove('opened');
this.more_list.classList.add('hidden');
toggleAria(this.more_list, 'aria-expanded');
});
}, 100);
}
this.container.classList.toggle('opened');
this.more_list.classList.toggle('hidden');
toggleAria(this.more_list, 'aria-expanded');
});
this.dropdown.addEventListener('click', () => {
this.toggle();
});
this.resize();
}
you can bind the eventlistener to keyup.
document.addEventListener('keyup', function(event) {
if (event.keyCode == 9) {
// close your menu
}
});
as stated in your question, close menu only when user "tab-away", bind the listener to the menu.
document.getElementById("your_menu_selector").document.addEventListener('keyup', function(event) {...}
your question has already an answer here: How to call function when I press tab key in javascript?
I am building a web app where I detect the headphones button event. I succeeded in capturing headphones button event when they are plugged in. Now I am trying to capture Bluetooth headphones next button event. Any help on this please?
Code for headphone button detection.
document.addEventListener('volumeupbutton', () => {
//Do something here
}, false);
I need something similar to this.
You can use keydown and keyup events for implementing the long press functionality.
// Imprementation of Long Press
const longPressTime = 1500;
let keyDownTimeout;
document.addEventListener('keydown', e => {
if (keyDownTimeout) {
return;
}
keyDownTimeout = setTimeout(() => {
// button was held for 1500ms, consider it a long-press
if (e.code === 'ArrowUp') {
console.log("Action Performed");
// do long-press action
} else {
console.log("Other action performed");
}
}, longPressTime);
});
document.addEventListener('keyup', e => {
clearTimeout(keyDownTimeout);
keyDownTimeout = 0;
});
Press any key
The above methods work for single key long press. Refer to KeyCode for key code.
Demo of above
I don't believe using the built-in volumeupbutton event will allow you to detect how long the click was, to determine if it should be treated as volume-up or skip-track. Instead you should be able to use the keyup/keydown events, combined with the keyCode property to determine if it is the volume button, like this:
const longPressTime = 1500;
let volumeUpButtonTimeout;
const volumeButtonKeyCode = 0; // you'll need to determine the key code
// cross platform way to get the key code
const getKeyCode = e => {
if (e.key !== undefined) {
return e.key;
} else if (e.keyIdentifier !== undefined) {
return e.keyIdentifier;
} else if (e.keyCode !== undefined) {
return e.keyCode;
}
}
document.addEventListener('keydown', e => {
if (getKeyCode(e) == volumeButtonKeyCode) {
volumeUpButtonTimeout = setTimeout(() => {
// button was held for 1500ms, consider it a long-press
// do long-press action
}, longPressTime)
}
});
document.addEventListener('keyup', e => {
if (getKeyCode(e) == volumeButtonKeyCode) {
clearTimeout(volumeUpButtonTimeout);
}
});
You could use this code to determine what keyCode corresponds to the volume up button:
document.addEventListener('keyup', e => {
console.log(e.keyCode);
});
I am trying to disable right and middle button of mouse so that it cant open new window or tab when click on any menu or hyperlink. Below javascript code works fine for right button but not working for middle button. Middle button of mouse gets captured but still new window or tab opens when click on hyperlink or menu.
<script type="text/javascript">
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = function () {
return false;
};
}
else {
document.onmouseup = function (e) {
if (e != null && e.type == "mouseup") {
if (e.which == 3) {
alert("Sorry..... Right click Is Disabled!!!!");
return false;
}
if(e.which===2)
{
e.preventDefault();
e.stopImmediatePropagation();
alert("Sorry..... Mouse Scroll click Is Disabled!!!!");
return false;
}
else if(e.button===4)
{
e.preventDefault();
e.stopImmediatePropagation();
alert("Sorry..... Mouse Scroll click Is Disabled!!!!");
return false;
}
}
};
}
Its not woking for firefox, chrome and IE.
try
document.onmousedown= function (e) {
if( e.which == 2 ) {
e.preventDefault();
alert("middle button");
}
}
According to MDN the auxclick event handles the "open link in new tab with middle mouse button" behaviour.
The following code will prevent the middle click behaviour on the entire page.
window.addEventListener("auxclick", (event) => {
if (event.button === 1) event.preventDefault();
});
If you want to disable it for a certain link only, just replace the event listener target (window) with a reference to the specific node.