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);
});
Related
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
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.
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;
});