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

Popular posts from this blog

Command prompt result in label. Python 2.7 -

javascript - How do I use URL parameters to change link href on page? -

amazon web services - AWS Route53 Trying To Get Site To Resolve To www -