Say I have a
<a id="btn" href="http://google.com">Link</a>
I want to intercept the click and temporarily change the event href to "http://google.com?linkClicked=true"
But only for that brief moment, when I inspect the source code again the href should stay the same.
So far I've tried
document.querySelector('#btn').addEventListener('click', (e) => {
this.href = 'http://google.com?linkClicked=true'
return true
})
But this changes the href permanently! I tried setting the href of the event but nothing.
Don't set the property of the link. Cancel the action by calling preventDefault() on the event, then initiate your own navigation.
document.querySelector('#btn').addEventListener('click', (e) => {
e.preventDefault();
location.href = 'http://google.com?q=Hello';
})
<a id="btn" href="http://google.com">Link</a>
I should add that going somewhere else than is originally displayed is suspicious and not user-friendly. It will also not work for users that use the context-menu to open a link in a new tab and so on.
Related
Our <a> tag opens a custom pdf viewer in our application by providing a function to the onClick property.
We want to provide a href for accessibility, so users can rightclick -> open in new tab, control+click or what else they fancy.
However, when the user clicks the <a> tag, we don't want to actually open the link, instead our onClick function should handle the event.
currently we have somthing like this:
render(){
return (<a href="www.stackoverflow.com" onClick={(e)=>this.linkClick(e)} >click here</a>)
}
linkClick(e) {
e.stopPropagation(); // does not stop the link from opening
console.log("link clicked");
return false; // does not stop the link from opening
}
In plain js this can be done by returning false on the onClick function.
We've also tried adding stopPropagation() to no avail.
Some react users add href="javascript: void(0)" while this does disable the link, it does not meet our accessibility needs.
Use preventDefault. Returning false has been deprecated since React 0.12.
linkClick(e) {
e.preventDefault();
console.log("link clicked");
}
ng-click and ng-href directives when used together will first execute click function. In the following example navigation to Google will be prevented and alert will be shown.
<a ng-href='http://google.com' ng-click="click($event)">Link</a>
$scope.click = function (event) {
event.preventDefault();
alert('click has been trigerred');
}
This will work though only when user clicks a link using left mouse button. If user will try to open the link in a new tab the click event won't be triggered. To some extent it seems correct because it's not strictly speaking "click", but is there any Angular directive for handling opening link in the new tab?
UPDATE:
I don't want to open new tab programatically, but handle event of opening new tab by the user.
Instead of using ng-href you could use one more function on click which will open the new tab for you.
<a ng-click="openTab(); click($event)">Link</a>
$scope.click = function (event) {
event.preventDefault();
alert('click has been trigerred');
}
$scope.openTab() {
$window.open('https://www.google.com', '_blank');
}
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.
How do I unbind the window when clicking an anchor tag with a unique ID? I am trying to use beforeunload so that when a user tries to navigate away from the page, they get a prompt asking to confirm they want to do so, but there is an anchor tag on the page that I would like to have not make this occur when clicked. It currently pops up the alert box because of navigating away from the page, but I want to create an exception for this anchor tag. How would I do this? I have tried unbinding onbeforeunload when a user clicks the anchor tag, but I believe my code might be wrong. any suggestions as to a fix for this? I do not understand binding and unbinding very well, so please be patient with me.
Thanks.
this is the code for what I am trying to do:
$('#catshopbuy').click(function(){
$(window).unbind('beforeunload');
});
Rest of the jQuery:
$(window).bind('click', function(event) {
if(event.target.href) $(window).unbind('beforeunload');
});
$(window).bind('beforeunload', function(event) {
$('div.offerWindow').css("visibility", "visible");
return 'Press "Stay on Page" and get a special offer!';
});
$('#catshopbuy').click(function(){
$(window).unbind('beforeunload');
});
It should be $(window).unbind('beforeunload');.
So something like this:
$(function() {
$(window).bind('beforeunload', function() {
return 'Press "Stay on Page" and get a special offer!';
});
$('#catshopbuy').click(function(){
$(window).unbind('beforeunload');
});
});
Here's what I want to achieve:
When an HTML link is clicked, I want to animate it before leaving the page
If the link is opened in a new window/tab, the animation should not take place
How on earth do I achieve this?
You could use javascript
$(function(){
$(".btn").bind("click",function(){
$(this).animate({'left': '100px'}, 100, function(){
window.location.href = index.html
})
})
})
But you'll have to stop the default action if your button is a link.
You'll need to capture the click event, prevent the default action, do the animation, then load the new page.
If using jquery (Available as a jsfiddle):
$('a').click(function (event) {
event.preventDefault();
$(this).animate({
//whatever
}, function() {
location.href = $(this).attr("href");
});
});
Update: Here's the new jsfiddle that accounts for the situation mentioned in the comments, go there for the updated code. The trick is to look for the keypress of ctrl or command, and abort the newly defined animated click handler if either key is pressed.
Note: The window needs focus before it can detect a keypress, in jsfiddle, that means the frame needs focus before it'll work.