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;
});
Related
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;
});
});
I have a problem with an apple on my site.
All buttons that have a "hover" event in CSS require to double click on it.
The first click triggers the "hover" and the second triggers the redirection
I would like to know if it was possible not to trigger the "hover" but to redirect to the link at the first click.
I found this piece of code but makes the click very sensitive if the scroll while pressing a link, link is triggered
var device = navigator.userAgent.toLowerCase();
var ios = device.match(/(iphone|ipod|ipad)/)
if (ios) {
$('a').on('click touchend', function(e) {
var el = $(this);
var link = el.attr('href');
window.location = link;
});
}
I'm not sure but it can be solve in CSS...
That's an UX Problem
Check that : https://css-tricks.com/annoying-mobile-double-tap-link-issue/
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.