This is the example which I got from w3schools, where I am getting weird behaviour for safari browser alone.
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousedown
Safari:
If we left-click on top of paragraph, the text turns red color and when I leave it , it turns Green color.
That's fine.
Now, I am right-clicking on top of the paragraph.Now the text color turns Red and when I leave it, it NEVER turns to green color. i.e onmouseup is not working in safari if we are using right click. Can anyone tell me why ?
Any solution for this ?
In safari, it seems like the focus is given to the context menu when right-clicking, so the context menu receives the mouseup event rather than the P element. As for a solution, you can detect the mouse button to prevent it to behave on the right click. Right click events are
messy unless you want to handle a custom context menu.
If you want the mouseup event to work in safari when fired with a right click, you will need to disable the context menu by adding this attribute to the P element:
oncontextmenu="return false">
It is also possible to detect if the left click fired the event (which is usually the button you want to handle):
function mouse_handler(event) {
var evt=window.event||event;
var button = evt.which || evt.button;
if (button == 1) { // if left mouse button
// handle the event
}
}
In the example from w3schools, it would lead to something like this:
function myFunction(elmnt,clr,event)
{
var evt=window.event||event;
var button = evt.which || evt.button;
if (button == 1) { // if left mouse button
elmnt.style.color=clr;
}
}
Then passing the event in the function call:
<p onmousedown="myFunction(this,'red',event)" onmouseup="myFunction(this,'green',event)">
Related
For my webapp I'm working on a popup element, which is used for menus and similar things. I want to redirect all mouse input on the current page to this popup element when it's visible, however I can get it to work.
I have a tile element which, on mouse hover, shows an image (and highlights the tile). When the user clicks on that image the popup is shown (as a context menu). This works already. When the user moves the mouse outside the tile the hover state is gone, the highlight and also the image disappear, which is not what should happen. Instead I want the visual state unaffected as long as the menu is visible.
So I tried to capture the mouse using Element.setPointerCapture. However, this requires a pointer id, which I don't have. I tried to use onPointerDown on the trigger image, but that didn't do anything.
What's the right way to implement this mouse capture, so that no mouse event is scheduled to any other HTML element, but the popup?
This is what I came up with so far:
private handleTriggerClick = (e: React.MouseEvent): void => {
console.log("mouse");
this.props.trigger?.props.onClick?.(e);
if (this.state.open && this.props.closeOnTriggerClick) {
this.close();
} else if (!this.state.open && this.props.openOnTriggerClick) {
this.open();
e.currentTarget.setPointerCapture(this.pointerId);
}
e.stopPropagation();
};
private handleTriggerPointerDown = (e: React.PointerEvent): void => {
console.log("pointer");
this.pointerId = e.pointerId;
};
where trigger is the image used to show the popup.
I also tried using a mouse move handler on the document, but that didn't work either, probably because of event bubbling where first the deeper elements receive the event before it reaches the document, so it's too late then to prevent default handling or stop propagation.
The Element.setPointerCapture API will only work when the pointer is in its "active button" mode (that is between pointerdown and pointerup or pointercancel).
I guess it's not exactly what you want...
Maybe requestPointerLock would be closer to what you are asking, but it may also be a bit too much (a confirm message would pop-up asking your users if they wish to let your app control their mouse etc.)
So a third way, probably easier, is to append an overlay element with a fixed position that would cover the whole page, you could make it appear also only when your menu is hovered, but without seeing your actual situation, I can only give such a broad advice.
I've a personal website where you can listen music while reading the content. After Firefox released the 66 version with the "autoplay" blocked, I'm having a lot of problems with the audio.
By the default, the audio player it's stopped so the user has to started it (and comply with the new behaviour standard that browsers want) but I've discovered that when I click on the links and it opens in a new tab target="_blank"the audio stops playing and the canvas animation also.
But I've discovered that if I open the links with the middle button of the mouse or I use Ctrl + Click the tab opens without changing to it on the background and the audio and the animation still works and don't stop.
So, I've been trying to change the default behaviour of the left click to fire a middle button or Ctrl + Click when I click on a link but I can't make it work.
I want to detect a left click on the entire document and change the behaviour to middle buttonor Ctrl + Click (but maybe this is an ugly approach) or make a function and call it on the <a> tag with the onclick=_the_function_
At the moment, I can detect the button (Reference):
$(document).onclick(function(event) {
if (event.which === 0) or (event.button === 0) {
event.stopPropagation();
event.preventDefault();
# here I want to change the pressed button
}
});
But I don't know in which variable I have to change the value of the pressed button. Or if this approach it's not the correct way.
Regards.
You could create a custom event that sets event.button and trigger that instead when the applicable links are clicked.
Something like:
$('a.someClass').click(function(e) {
if (e.button !== 1) {
e.preventDefault();
e.stopPropagation()
console.log('Prevented left')
var evt = jQuery.Event('click', {button: 1});
$(this).trigger(evt);
}
});
I have this code:
document.getElementById("1").oncontextmenu = function() {
return false
}
It disables the little window that shows after a right click (only on the button/image).
On my code (https://jsfiddle.net/nnuyguat/) everything is working fine, except for when I do a right click on the image as it triggers the left click event and changes the image untill I move the mouse.
Another related problem is if I press left click without releasing and then right click (releasing the right button), it will also change the image.
I need to prevent the image changing with right clicks. It should work as the closing button of the browser (except it's another images and it doesn't close anything).
You could use event.button to check which button is pressed because event.button returns a number which indicates which mouse button was pressed.
Source
Edit:
if (event.button === 2){
// run your function
}
That should be correct, as I have never used this before.
The right click event is not triggering a left click. It is just activating your object. Your image says "click" but it is inaccurate. It should say "Active".
Second, a number is NOT a valid ID. So rename your div from id="1" to id="one" or similar.
Finally, try with this code, instead of yours:
document.getElementById("one").addEventListener('contextmenu', function(ev) {
ev.preventDefault();
alert('hello from right click');
return false;
}, false);
See https://jsfiddle.net/nnuyguat/3/
The issue with your image changing on right click is not related to your javascript, but to your css. The :active CSS pseudo-class matches when an element is being activated by the user. According to the specs this should only be when the element is activated with the primary mouse button, but it seems like most browsers do not implement the spec correctly. See this question for info.
A work around maybe to abandon the :active pseudo-class, and set up a function to change the content explicitly on left click.
Its because of the oncontextmenu event. Remove it and it will work
I have a grid of boxes that a user interacts with on a website. If they click a box, it changes color. There are quite a lot of boxes and I'd like it to be less tedious, so it would be nice to have the functionality be: if mouse button is down and you hover the box, it changes states. Any thoughts?
You can use the buttons property on the event passed to the hover callback to check what mouse buttons were pressed when the event was triggered.
For example, to detect whether the left button was pressed when an element is entered with the mouse, you could use:
myElement.addEventListener("mouseover", function(e){
if(e.buttons == 1 || e.buttons == 3){
//do some stuff
}
})
Here is a demonstration of this idea: http://jsfiddle.net/Ah6pw/
Hold down the left mouse button and move your mouse through different list items.
I found something simmilar. Clicking the objects in some space and then little interaction.
http://mrdoob.github.com/three.js/examples/canvas_interactive_cubes.html (look for inspiration into the code)
Also these links could be usefull for you
jQuery is mousedown on mouseover
Detect left mouse button press
http://unixpapa.com/js/mouse.html
See onmousedown & onmouseup events.
Within my Firefox extension I'm trying to keep track when the window is actually the active window. For this, I add the following two listener to the window:
window.addEventListener("deactivate", function(event) { alert("deactivate"); }, false);
window.addEventListener("activate", function(event) { alert("activate"); }, false);
Basically everything works fine. When I toggle between different windows, or minimize/maximize Firefox, the events fire quite as I would expect it. However, both events also fired when I move the window even if it is already active. When I start moving the window, the "deactivate" event is fired; when I stop moving and release the mouse button, the "activate" event is fired. I have no idea how can I detect and ignore this behavior. Intuitively, the window is all the time active.
I tried to check before I handle the "deactivate" event if the mouse button is pressed. However, adding a "click" event listener to the window seem not to include the window's title bar. Anyone any idea how I can distinguish beween "really" de-/activating the window and moving the window? Thanks a lot in advance!
You can use this answer to detect the browser position on the screen. If you do this at the start you can compare if they are changing.
Something like when the page loads:
var x,
y,
win = window;
if(win.screenTop !== undefined) {
x = win.screenleft;
y = win.screenTop;
} else {
x = win.screenX;
y = win.screenY
}
and compare those values to the current values when your events triggers.
(Note that this only works when the position of the window changes)