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");
}
Related
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.
I have big upload form, user can drag and drop images here. But when images are loaded, i'm showing button, which on click should link to some page. But this element instead of loading next page, opens file chose window (its parent default behaviour)
So I'm checking, if event has class, if it's true, I'm using e.preventDefault().
And this works better (I don't have image choose window on link click, but also this link will not work - every event is disabled) My question is, how i can enable linking now?
// jFiler is a parent - upload form, with event - on click it opens window for file choose - like input field.
$(document).on('click', '.jFiler', function(e) {
if ($(event.target).hasClass("jFiler-input-done-btn")) {
e.stopPropagation();
e.preventDefault();
}
});
$('.jFiler-input-done-btn').on('click',function(e) {
// Test works, but this is a link, and it cannot link to another page now...
alert ('test')
});
You break the link execution with e.stopPropagation() and e.preventDefault() in the parent click event. You have to just return true there.
$(document).on('click', '.jFiler', function(e) {
if( $(event.target).hasClass("jFiler-input-done-btn") ) {
return true;
}
});
Just redirect to the other page inside the click event you already attach :
$('.jFiler-input-done-btn').on('click',function(e) {
windows.location.href = $(this).attr('href');
});
//OR also
$('.jFiler-input-done-btn').on('click',function(e) {
e.stopPropagation();
});
Hope this helps.
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.
We have many hyperlinks in a html page. On click of which we do certain function.
After one hyperlink is clicked I wanted to make other hyperlink clicks to do nothing until first one finishes it processing. (During testing testers started clicking the hyperlinks rapidly one after another)
I did something like this, but it does not seem to be working. Basically used a variable to track if a hyperlink is clicked.
var hyperlinkClickInProcess=false;
function clickHandler(inputData){
if(hyperlinkClickInProcess ==false){
hyperlinkClickInProcess =true;
linkProcessing(inputData);
hyperlinkClickInProcess =false;
}
}
Any thoughts on how to implement such functionality?
function disableAllLinks() {
// search for all links and remove onclick event handlers, + return false.
}
function enableAllLinks() {
// search for all links and reassing onclick event handlers
}
function clickHandler(inputData){
disableAllLinks();
/// Link processing body here ////
enableAllLinks();
}
This question tells how to use jquery to disable all the links on a page: jQuery disable a link. But instead of disabling just one specific link, you could use a similar strategy on all the links on the page by doing like so:
$('a').click(function(e) {
if(hyperlinkClickInProcess) {
e.preventDefault();
}
else {
hyperlinkClickInProcess =true;
linkProcessing(inputData);
hyperlinkClickInProcess =false;
}
});