Using DIV as link triggers redirect on new tab shortcut

Question

I have a section of a page (widget) which I would like to use as a link (clicking anywhere will go to a different page):

<!-- just an example. real application is quite a bit more complex -->
<div data-href="/page">
   <h1><a href="/page">Title of sample content</a></h1>
   <p>
        some content here with an image
        <img src="image.jpg">
   </p>
   <div>
        and many more elements in here
        <div>
             with nested structure with semantic meaning
        </div>
   </div>
</div>

Since the section is <div>, I cant wrap it around <a> since that is against HTML spec. I also cant change the divs to span since they actually have semantic meaning.

Currently I attach a JS click event on which I change the browser location which effectively works as a link:

$('div').click(function() {
    window.location=$(this).data("href");
});

This works ok except when you Ctrl+Click or Cmd+Click on the <a> to open the link in the new tab. Since for this you are not explicitly doing right click, the browser registers it as a click hence the function gets executed anyway.

I guess I could check if any modifier key is pressed at the click event however I feel that is a bit cumbersome. Is there a nice JS solution for this?

Why complicate things? Just use an anchor instead of that div. — Shomz, Jun 12 '14 at 01:42
`` cant have other `
` inside or at least if you stick to HTML spec - http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct — miki725, Jun 12 '14 at 01:43
I know, change that one to span... It would even make more sense semantically since it has nothing but text (differently styled, I assume). — Shomz, Jun 12 '14 at 01:45
that is just a baby sample. the real html snippet has lots of divs there... — miki725, Jun 12 '14 at 01:47

score 0 · Answer 1 · answered Jul 05 '14 at 04:29

0

You can do something like this (jQuery for the click handler):

$(selector).click(function(e) {
  if(e.shiftKey) {
    //Shift-Click
  }
  if(e.ctrlKey) {
    //Ctrl+Click
  }
  if(e.altKey) {
    //Alt+Click
  }
});

You can handle whichever you want inside an if inside the click handler like shown above

answered Jul 05 '14 at 04:29

Bhavik

92
2
5
12

thx of your suggestion however as per my question, I would prefer not to rely on checking for modifier keys – miki725 Jul 05 '14 at 14:16

Using DIV as link triggers redirect on new tab shortcut

1 Answers1