I am trying to add parameters to clicks on outgoing links. So for example something like this:
document.querySelectorAll('a[href*="/outgoing/"]').forEach(i => i.addEventListener('click', function (e) {
e.target.href += "?param=this";
}, false));
And this works fine for clicks on links that don't have target="_blank". Links that open in a new tab, the new tab opens before the href is edited. Is there a way to modify the outgoing URL in links that open in a new tab? How is that even handled? Where can I learn about how that works?
Sure you just need to call preventDefault on the event object, then call the window.open method passing in the correct target attribute if it exists.
e.g. (commented for clarity)
document.querySelectorAll('a[href*="/outgoing/"]')
.forEach(i => i.addEventListener('click', function(e) {
// stop the event navigation
e.preventDefault();
// get the anchor element
const ele = e.currentTarget;
// find the target attribute if it exists
const target = ele.hasAttribute('target') ?
ele.getAttribute('target') :
null;
// open the modified link using the target
window.open(ele.href + "?param=this", target);
}, false));
my link
For preventDefault see https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
For window.open see https://developer.mozilla.org/en-US/docs/Web/API/Window/open
Related
I have a link on am image that I include dynamically with this jQuery:
//Add back button code onclick
$("#backLocation").replaceWith(" ");
I then set the onCLikc event for the link with:
$("#backClick").on('click', function (e) {
//go back a page
parent.history.back();
});
But it does not go to the previous page.
I am not sure if its because its a locally hosted web app or what, or If I have just structured something wrong. In the adress bar the page just changes from:
page.html to page.html# when I click the back image link I cerated.
Proper .on structure is $(document).on(action, selector, function() {});
Also, you are click an href, which will tell the browser to navigate to a page, then move back a page, resulting in no action being taken. Try adding preventDefault.
I would also suggest accessing the window to go backward in history.
$(document).on('click', "#backClick", function (e) {
e = e || window.event;
e.preventDefault();
window.history.back();
});
Adding window.event will allow for support on IE 8 and older browsers.
You need to update your click binding to following
$(document).on('click', "#backClick", function (e) {
//go back a page
parent.history.back();
});
I using the Javascript library D3 and I have the ability to select multiple nodes by using shift + left mouse click. When I do this in Firefox (as my nodes have images appended) it opens the image in a new window/tab. I don't really want this happening.
How do I stop this event from firing ?
with jquery:
jQuery(document).keydown(function(e){
if(e.which === 16) {
e.preventDefault();
return;
}
});
update:
How about instead of disabling shift, you try to disable the click. you might stop it if you attach a click event and use an event.preventDefault() on it
This is how in d3 you completely disable clicks
d3.select("#prevent_link").on("click", function() {
var e = d3.event;
if(e.shiftKey) {
// CANCEL THE EVENT, WHICH WILL PREVENT ANY LINKING FROM OCCURING
e.preventDefault()
}
});
If you still want the link to work — but open in current window instead of new window — you can do this:
d3.select("#prevent_window").on("click", function() {
var e = d3.event;
if(e.shiftKey) {
e.preventDefault()
// Get the href of the <a> tag that was clicked
var href = d3.select(this).attr("href");
window.location = href;
}
});
Here's a jsFiddle. The last example doesn't work because jsFiddle doesn't let you save scripts that contain window.location, so I didn't include the last line (window.location = href;) in the fiddle.
because I have both image and link hover states, I am using a common piece of code to make sure that you don't need to tap twice to open a link on iOS. See down for code used.
However, I have noticed that when using a link now with target="_blank", it opens both in the parent as well as the new window. How can I prevent that from happening? Naturally I want the parent tab to remain on the current website.
Also, I've also noticed that the javascript seemed to have made tapping a little on the sensitive side, i.e. sometimes it already opens a link on the next page with only a single tap. Is this normal? Is there a solution for this?
$('a').on('click touchend', function(e) {
var el = $(this);
var link = el.attr('href');
window.location = link;
});
You can use e.preventDefault(); to cancel native behavior and then use window.open(link, target); to open link in appropriate target:
$('a').on('click touchend', function(e) {
e.preventDefault();
var el = $(this);
var link = el.attr('href');
var target = el.attr('target');
window.open(link, target);
});
I have requirement where clicked on link it should open the mail to be sent the user on whose name i clicked. i am doing it by constructing the Anchor tag and by setting the href attribute, problem i am facing is , our platform has a function which shows alert asking do you want to navigate or no. this alert should not come when i click on my link, but unfortunately it comes when i clicked on link. is there alternative for this?
[Note : i cannot change the platform code]
var htmlElement = $('<a class="b">('+_email+')</a>').attr('href','mailto:'+_email);
i also tried jquery click , but no use
$('.b').click(function() {
window.location = $(this).attr('href');
}).click();
You need to change the code that does the onbeforeunload checking. Normally it is done with a flag that you can set.
You can override the onbeforeunload and reapply it after the link is clicked.
Example:
HTML
<a class="mail" href="mailto:foo#example.com">Mail</a>
<br/>
Link
JavaScript
window.onbeforeunload = function(e) {
return 'Dialog text here.';
};
$(".mail").on("click", function () {
var _onbeforeunload = window.onbeforeunload;
window.onbeforeunload = $.noop;
window.setTimeout( function () {
window.onbeforeunload = _onbeforeunload;
},20);
});
Fiddle
http://jsfiddle.net/vE9E6/
You just need one simple change to your code...
$(document).on("click", "a.b", function(e) {
e.preventDefault();
window.open(this.href);
});
That stops the default action caused by clicking the link, and then uses window.open to open the mailto link in a new window, rather than changing the location. This will stop the onbeforeunload event firing.
I have created a clickable div element that has a few links inside it. When I click anywhere on the div the page will go to the mail link but I want to be able to go to all the other links inside that div. I have managed to do this by calling the e.stopPropagation(); method. This works very good. You can see it in action here:
http://jsfiddle.net/nfZ3y/1/
The problem is, when hold the ctrl key and click on the link (to open it on a new tab), the link will not work and the page will go to the default link (instead of the one that I just clicked on). How can I achive all of the functionalities of the child links and add a default link for my div?
As people pointed out, it seems stopPropagation works differently in Firefox from the other browsers. My only suggestion is handling the click yourself:
$('.first').click(function (e) {
var title = $(this).children('.main-link');
var href = title.attr('href');
if ( e.ctrlKey )
window.open(href,"_blank");
else
window.location = href;
return false;
});
$('.first a').click(function (e) {
var title = $(this);
var href = title.attr('href');
if ( e.ctrlKey )
window.open(href,"_blank");
else
window.location = href;
return false;
});
Working example on jsFiddle.
Update: for less redundancy, substitute the first handler for this:
$('.first').click(function (e) {
$(this).children('.main-link').click();
return false;
});