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.
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 a Javascript function with following code.
function NodeClickActions(sender, eventArgs) {
event.preventDefault();
//Get whether user clicked CTRL key or not
var bCtrlPressed = eventArgs.get_browserEvent().ctrlKey;
//URL of the actions page
var URL = "../Actions.aspx";
//If CTRL key was pressed
if (bCtrlPressed) {
parent.MainPage.location.href = URL + "?PackageId=00000000-0000-0000-0000-000000000000&All=" + bCtrlPressed;
}
else {
parent.MainPage.location.href = URL;
}
}
I need to stop the page being opened in a new tab. Please note, event.PreventDefault(); won't do the trick unfortunately.
I understand this is due to browser behaviour rather than the code.
Any suggestion is welcome. Regards!
Here is the most simpliest way for that, preventing click on url is much smarter then preventing pressing of CTRL/CMD buttons because functionality like CTRL/CMD + CLICK is browser functionality and cannot be overwritten (or at least I didn't have success with it)...
$(document).ready(function(){
$("a").click(function(e){
e.preventDefault();
window.location.href = $(this).attr("href");
});
});
depend on case where you will use you need to apply something similar for form submiting... because that is also affected with this browser functionality
Important: OS X users using Command + Click, never forget that
Addition:
Because you want to disable open in new tab/window functionality under binding "click" just do preventDefaults for contextmenu (right mouse button)
$("a").contextmenu(function(e){
e.preventDefault();
});
Detect key of ctrl press or not .Use Jquery For event handling easly
var ctrl=false;
$(document).on('keydown',function(e){
console.log(e.ctrlKey)
}).on('click','a[href]',function(e){
if(!ctrl){
e.preventDefault();
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
one
You need to add listener directly on anchor tag instead of using event delegation and adding on parent element. Working example here.
HTML
Click Me
JS:
$(document).ready(function ()
{
$("a").on('click',function(event)
{debugger;
event = event || window.event;
event.preventDefault();
event.stopPropagation();
return false;
});
});
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 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;
});
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.