I'm already search a lot but still can't find the right answer.
I wonder why middle click (scroll button) can't load onclick function on Firefox only while on Chrome it works. So instead of onclick function it shows href link which is javascript:void(0)
<a href="javascript:void(0);" onclick="open_tab();">
Javascript
function open_tab(){
my_tab=window.open('http://www.google.com/', my_tab);
}
Tell my why. Thanks a lot.
I don't have a middle click on this computer to test this, but to make your middle click cross browser compliant, I would add a event listener in javascript:
var open = document.getElementById('opentab');
open.addEventListener ("click", function (e) {
if (e.which === 2) {
e.preventDefault();
open_tab();
}
});
This depends on adding an ID to your link like:
Open Tab
Also, correctly pointed out by espascarello, the mozilla community abandoned firing on click events on middle and right press: http://bugzilla.mozilla.org/show_bug.cgi?id=180078
To accomplish this for all browsers
I made it a bit simple
function open_tab(){
my_tab=window.open('http://www.google.com/', "Google");
}
var link = document.getElementById("alink");
link.addEventListener("mousedown", function(e) {
e.preventDefault();
if(e.which===1||e.which===2){
open_tab();
}
});
<a id="alink">Open Google</a>
The line
if(e.which===1||e.which===2){
Makes sure that the window opens only on left and middle mouse click.
It works fine for me!!!!!!!! Hope it helps!
Related
I am working on a large project and need to fix some accessibility issues.
These is a section which has been generated by https://www.atbar.org/ in a JS format I am not familiar with. The user clicks buttons to change font size, background colour and other html elements to assist them with reading content.
When you click on the buttons with your mouse they work fine. This is an example of how the buttons appear:
<li class=“access-button">
<a title="Decrease Text Size" id="block_accessibility_dec" tabindex=“0">A-</a>
</li>
If I focus my Chrome inspector on the link element I can see there is an event listening for my click:
This appears to trigger the change in font size. I found the code that triggers this click, it is in a JS format that I am not familiar with:
M.block_accessibility = {
init: function(Y, autoload_atbar, instance_id) {
this.defaultsize = M.block_accessibility.DEFAULT_FONTSIZE;
// This event triggers after clicking
Y.all('#block_accessibility_textresize a').on('click', function(e) {
if (!e.target.hasClass('disabled')) {
M.block_accessibility.changesize(e.target);
}
});
// This is the function it runs, it has many cases for all the different buttons.
changesize: function(button) {
Y = this.Y;
switch (button.get('id')) {
case "block_accessibility_dec":
Obviously this is just snippets of the code with comments I added.
What I require is the user to be able to change the font size using just tab and enter, so I added the following JQuery:
$("#block_accessibility_dec").keyup(function(event) {
if (event.keyCode === 13) {
$('#block_accessibility_textresize #block_accessibility_dec').click();
}
});
This is not triggering the change in font size. Yet when I click on the button it does? There is probably a really simple solution here but I've been stuck for ages. I tested the .click() on other elements on the screen and it works for them so the JS is definitely executing.
I have also tested:
$(this).click();
But to no avail.
Try to trigger the click event by the native way:
$('#block_accessibility_textresize #block_accessibility_dec')[0].click();
Source: I tried their demo page together with the chrome inspector and couldn't get the click working with JQuery.
But with the native click event it suddenly worked.
Unfortunately I can't really explain to you, why JQuery doesn't work here. Maybe something with their version (1.11)?
Replace your code with the following code and add the keyup event. This should work when you press the enter key.
Y.all('#block_accessibility_textresize a').on('click keyup', function(e) {
if (e.keyCode == 13 || e.keyCode ==9) {
if (!e.target.hasClass('disabled')) {
M.block_accessibility.changesize(e.target);
}
}
});
You should use the following Jquery:
$('#block_accessibility_textresize #block_accessibility_dec').trigger("click");
Please let me know if this doesn't work.
Challenge: prevent mouse middle button to open new tab in anchor tag with a particular class.
my problem is I have tried but it stopped working of all anchor tags in page but I don't want it.I want to stop working of middle button to open a new tab in anchor tab having class name tab1.
visit: http://jsbin.com/wemapehadu/edit?html,output
can anybody have solution for that...
Another simple solution
$(function(){
$(document).on("click", function(e){
if($(e.target).is("#google") && e.button===1)
e.preventDefault()
})
})
JS Bin
Google Bing
[FIDDLE LINK][]
http://jsfiddle.net/kezcrxop/1/
In your jsfiddle you forgot to enable JQuery, so it could never work.
Your Javascript didn't quite work, but you were going in the right direction. This will work (with JQuery enabled):
$(document).ready(function() {
$(document).on("mousedown","a.aa",function(e) {
if(e.which == 2) {
e.preventDefault();
}
});
});
I'm trying to achieve the following. Click on a link, display menu. As soon as that menu loses focus, clear the menu (also when menu item is clicked, remove the menu).
Here is my dumbed down code:
<a id="owner" href="javascript: doThis();" onblur="remove();">ClickOnMe</a>
function doThis() { console.log('clickedOnItem'); }
function remove() { console.log('removed'); }
I can't seem to get this to work. It works fine in IE10, but I can't get to work in Chrome.
Fiddle me this: http://jsfiddle.net/5t6wr/5/
For some reason chrome isn't registering your link as a focused item. What we have to do is force the link to be focused so chrome recognizes it.
Change your link to the following:
<a id="owner" href="javascript: document.getElementById('owner').focus(); doThis();" >ClickOnMe</a>
We added the focus to owner, then proceeded with your function to bring up the menu.
Inside your doThis function you will want to add the following:
document.activeElement.onblur = function() { remove(); };
That is going to take the current Active Element - and when focus is lost, run your script to close the window.
Note: You should put your remove function on a timeout, as you will be loading something from the menu, and don't want to have both trigger at the same time, it will cause a conflict.
Here is a fiddle to see the final version:
http://jsfiddle.net/5t6wr/4/
I have a popup where i basically just dim the body giving it the lights out effect. I have a click handeler where if the body is clicked it will close the popup but my issue is the click handler stops all clicks even before the popup is opened. Does anyone know how i could do this so that clicking on a link before the popup is opened would go to the link but clicking one after the popup was opened would do my function and not click the link?
Heres what i use right now:
$(document).ready(function() {
$("body").click(function(){
var element=document.getElementById("game");
//yes i could use the jquery method for all of these but this works
element.width="650";
element.height="500";
element.style.position="relative";
$("body").fadeTo(3000,1.0);
}
return false;
})
});
You can actually add your "body" click handeler only after clicking your link/opening the popup. Then after clicking the "body" you may remove it again and restore the click handler for your link. "bind()" and "unbind()" will be handy.
K
Where's the jQuery? When you use jQuery, you use jQuery...
When you click on the body, you can check whether #game is visible or not and work with that:
$(document).ready(function() {
$('body').click(function(e){
if (!$('#game').is(':visible')) {
$('#game').width('650px');
$('#game').height('500px');
$('#game').css('position', 'relative');
$('body').fadeTo(3000, 1.0);
e.preventDefault();
return false;
}
});
});
What I want to happen is, when you click a link (id="dontFollow"), it triggers a click on a different link(id="follow") and stops you from following the original link.
This is how I thought it should be done-
$("#dontFollow").click(function(e){
$("#follow").click();
e.preventDefault();
});
... but it's not working. Whats wrong with my code?
UPDATE:
This is a little more tricky than I originally explained. It appears that I need to "click" on the other link to trigger some other events to cause my page to slide to the anchor. Your suggestions for "window.location" does change the window location but it's not triggering my slide events.
$("#dontFollow").click(function(){
window.open($("#follow").attr('href'));
return false;
});
just return false
Simply have the function return false;
I don't think you can "click a link" programmatically, you can however navigate by setting window.location.href
$('#dontFollow').attr('href','#').click(function(){
window.location.href = $('#follow').attr('href');
});
Your code is correct. Using e.preventDefault() will prevent you from following the link being clicked.
You have't stated what specifically isn't working, but if you're trying to visit the href of the other link, then do this:
$("#dontFollow").click(function(e){
window.location = $("#follow").attr('href');
e.preventDefault();
});