javascript - Prevent opening link in same tab, but allow opening in a new tab -
to improve performance on bulky web apps, i've created update converts them single-page apps. js / jquery in use; far, hasn't seemed useful introduce angular, react, meteor, etc. however, beta testing has revealed problem, (duh) user want open in new tab / window. interactive elements in question anchors no href
attribute, not possible open in new tab.
my understanding if use a
href
, preventdefault()
, users still not able open in new tab.
i considered placing "open in new tab" checkboxes next interactive elements, , considered other approaches require people learn new, idiomatic interaction patterns. bad idea.
now, i'm thinking i'll try using onbeforeunload
event handler prevent changing current window's location , instead affect desired changes current screen. believe not prevent opening in new tab, since doing opening in new tab won't fire unload event.
i can't first person try address problem, can't find info on it, either. know how prevent opening in same tab while allowing opening in new tab , while not forcing people learn new interaction patterns? have reason believe using onbeforeunload
event handler not allow me achieve that?
update
in case helps in future, below developed. @kiko garcia; hadn't occurred me 1 detect mouse button used. tested on firefox 54, chrome 57, edge, ie 11 (all on windows 10) , on safari ios10 , on android browser android 7. (will test on mac next week, assuming it's now.)
// track whether or not control key being pressed var controlkeyispressed = 0; $(document).keydown(function(keydownevent) { if(keydownevent.which == "17") { controlkeyispressed = 1; } }); $(document).keyup(function(){ controlkeyispressed = 0; }); // on clicking anchors of specified type $("a.some-class").on("click", function(clickevent) { // left click if (clickevent.which == 1 && controlkeyispressed == 0) { // prevent default behaviour clickevent.preventdefault(); // perform desired changes on screen // middle click } else if (clickevent.which == 2) { // prevent default behaviour because behaviour seems inconsistent clickevent.preventdefault(); } });
just this answer says can provide different actions different mouse events. of course can window.open()
or location.href
change, example.
with can like:
- left click: change location.href
- middle click: open new window
- right click: open custom menu
$(document).mousedown(function(e){ switch(e.which) { case 1: //left click break; case 2: //middle click break; case 3: //right click break; } return true;// allow browser know handled it. });
try that
please note pasted answer's code. should adapt tagname , usability
Comments
Post a Comment