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);
}
});
Related
When this element is middle clicked:
// Allow middle button click to open client in another tab.
$(document).on('mousedown', '.clientlist-edit', function (event) {
if (event.which === 2) {
event.preventDefault();
var url = $(this).attr('href');
url = url.toLowerCase().replace('/addedit', '/clientindex');
window.open(url, '_blank');
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="clientlist-edit" href="/Clients/Management/AddEdit/4ffac190-72d2-476a-b0be-a9d90097272a">
<i class="glyphicon glyphicon-pencil"></i> <strong class="title">Client Name</strong>
</a>
This handler is called and when it gets to window.open, two tabs are opened. The first is the URL (variable URL) which is desired. The second is the original href set on the anchor element which is undesired. I'm calling preventDefault. What am I missing?
It is reproducible. See the link below. Sometimes it is two middle clicks. It is a middle click. It only happens in Firefox.
https://jsfiddle.net/jsmunroe/eap1b6k7/3/
I'm using Firefox 68.0.2.
I guess your goal here is to intercept the user trying to open a link in a new tab and instead open a different link in a new tab. If I'm correct, then you're going to need to adjust your strategy in a few key ways:
Don't use mousedown
Click events are triggered by a mouse-down followed by a mouse-up event. That means that normally you have to press and release the button before any click-type thing happens, whether that's navigation (left-click), context menu (right-click) or open in new tab (middle-click). If you try to simulate this using mousedown, it's gonna feel weird - the action will happen too soon!
Also, as you've now observed, it won't work correctly: the corresponding click event will still happen after your handler runs, because you're not cancelling the right event. What does your preventDefault() / return false accomplish? Well, try holding the middle button down and dragging: most browser will probably pan around the view as you move your mouse, but if you try this on your "Middle Click Me" element... Nothing happens. Yep, you've only succeeded in making your page slightly more annoying to scroll around on.
DO use the auxclick event.
I'm guessing you went with mousedown in the first place because you observed that nothing fired for a middle click when you captured the click event. A few years ago, click would've worked fine - but now, click only fires for the primary mouse button. This is a good thing! Way too many people inadvertently blocked right- and middle-clicks by capturing click, when they only intended to capture left-clicks. Presumably if you're capturing auxclick, you know what you're doing and can be trusted to handle it properly. (so, y'know... Do be careful)
The w3c actually has rather good documentation on all of this, so I'd be remiss if I didn't link to it and quote the relevant bits here:
The click event should only be fired for the primary pointer button (i.e., when button value is 0, buttons value is 1). Secondary buttons (like the middle or right button on a standard mouse) MUST NOT fire click events. See auxclick for a corresponding event that is associated with the non-primary buttons.
The click event MAY be preceded by the mousedown and mouseup events on the same element, disregarding changes between other node types (e.g., text nodes). Depending upon the environment configuration, the click event MAY be dispatched if one or more of the event types mouseover, mousemove, and mouseout occur between the press and release of the pointing device button. The click event MAY also be followed by the dblclick event.
Finally, here's your snippet with the changes above, for your review (you can't actually test it here, since window.open is blocked in Snippets - but you'll get an error indicating this and not see any tabs open; paste it into your fiddle for a real test):
// Allow middle button click to open client in another tab.
$(document).on('auxclick', '.clientlist-edit', function (event) {
if (event.which === 2) {
event.preventDefault();
var url = $(this).attr('href');
url = url.toLowerCase().replace('/addedit', '/clientindex');
window.open(url, '_blank');
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="clientlist-edit" href="/Clients/Management/AddEdit/4ffac190-72d2-476a-b0be-a9d90097272a">
<i class="glyphicon glyphicon-pencil"></i> <strong class="title">Client Name</strong>
</a>
Yep - the only change is mousedown -> auxclick! Enjoy...
Further reading
Middle button click event
UI Events - event type click - W3C Editor's Draft
Element: auxclick event on MDN
Lets say I want to intercept certain anchor element links and track them. I have the following which works.
HTML
go to foo
JS
$('a[data-mytracking]').click((event) => {
event.preventDefault();
// Do some synchronous code to log tracking
console.log(event.target.getAttribute('data-mytracking'), event.target.href);
window.location = event.target.href;
});
Is there a way to have this click code still intercept middle clicks or right click "open in a new tab"? I know I can do this if I make the href="javascript:void(0)". But then people lose the ability to open in a new tab.
Some browsers have auxclick event. You also can track event.which to track middle button.
$("a[data-mytracking]").on('click', function(ev) {
if( ev.which== 2 ) {
e.preventDefault();
// do smth else
}
});
Opening through a contextmenu is possibly not trackable, but you can have oncontextmenu event.
P.S. at least Chrome doesn't trigger click on opening a new tab with a middle button. But it does trigger mouseup.
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 try to close popup when I press Esc but it only works while video isn't on play.
$(document).bind('keydown', function (e) {
if(e.which === 27){
$('#youmax-video-lightbox').attr('src', '');
$('#youmax-lightbox').hide();
}
});
U can see in:
http://www.vigerm.com/videos
I think this is because when the user clicks on play to start the video, the flash object gets the focus and the document does not receive anymore the input events.
Not sure what you can do about it. Maybe auto-play the videos when opening the pop-up?
It has nothing to do with whether or not the video is playing. If you open the video without clicking anything else, Esc still closes it fine. It's when you click the video, events no longer bubble up to the document, so your handler is never called. You need to either stop the video from stopping event propagation or attach handlers to the video element itself as well.
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)">