1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Making an onclick area behave like a link

Discussion in 'JavaScript' started by sarahk, Oct 3, 2017.

  1. #1
    upload_2017-10-4_11-57-2.png
    I have a box on a site, there's a show details link in the box but also a listener that means if I click anywhere in the box I'll go the show details page.
    SEMrush
    Is it possible to force the context menu to add "open in new tab" in the listened to area?
     
    sarahk, Oct 3, 2017 IP
    SEMrush
  2. hdewantara

    hdewantara Active Member

    Messages:
    403
    Likes Received:
    33
    Best Answers:
    17
    Trophy Points:
    80
    #2
    For it to behave like below?
    <div class="box">
      <a href="#">do something else</a>
      <a class="show-detail" href="#">show detail</a>
    </div>
    HTML:
    .box{
      position: relative;
    }
    .box .show-detail{
      position: absolute;
      bottom: 0;
      width: 100%;
    }
    Code (CSS):
     
    hdewantara, Oct 4, 2017 IP
  3. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,100
    Likes Received:
    2,575
    Best Answers:
    457
    Trophy Points:
    710
    Digital Goods:
    29
    #3
    Wait, if you click outside the link area, the listener for the link triggers?
     
    digitalpoint, Oct 4, 2017 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    23,579
    Likes Received:
    3,183
    Best Answers:
    87
    Trophy Points:
    615
    #4
    Yes it does
    but users have said they want to be able to right click to open in new tab - but they're internal links so we wouldn't want "new tab" to be the default action. No problem with the right mouse click, but when there's a listener the context menu doesn't know it's really a link.
     
    sarahk, Oct 4, 2017 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,433
    Likes Received:
    1,509
    Best Answers:
    220
    Trophy Points:
    515
    #5
    My advice, rip out the JavaScript -- ALL of it. ESPECIALLY if you've got a "click anywhere on the page" intercept since you're basically making users bounce the moment they see it do that -- or diving for script blocking tools like noScript, ScriptSafe, Ghostery, etc, etc...

    In general intercepting clicks with JavaScript is accessibility trash and should be avoided -- it's the province of two bit sleaze on porn sites desperate for advertising revenue, NOT working on legitimate site designs.
     
    deathshadow, Oct 11, 2017 IP
  6. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,100
    Likes Received:
    2,575
    Best Answers:
    457
    Trophy Points:
    710
    Digital Goods:
    29
    #6
    There's actually very legitimate use cases for doing it. For example clicking a username right here in this thread. JS intercepts it to give you an AJAX overlay for the user profile (just a summary). Following the actual link (like right clicking and opening in a new window) will take you to the user's full profile. There's about 100 other good use cases I can think of off the top of my head.

    I can only assume that @sarahk isn't building some porn redirection garbage. :)
     
    digitalpoint, Oct 11, 2017 IP
  7. sarahk

    sarahk iTamer Staff

    Messages:
    23,579
    Likes Received:
    3,183
    Best Answers:
    87
    Trophy Points:
    615
    #7
    Lordy @digitalpoint !
    Nope, the destination would always be the same, but where the user's click is listened & not a <a> to we just want to allow the right click option.
     
    sarahk, Oct 11, 2017 IP
  8. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,100
    Likes Received:
    2,575
    Best Answers:
    457
    Trophy Points:
    710
    Digital Goods:
    29
    #8
    Do you by chance have it setup in something like jsfiddle?
     
    digitalpoint, Oct 11, 2017 IP
  9. sarahk

    sarahk iTamer Staff

    Messages:
    23,579
    Likes Received:
    3,183
    Best Answers:
    87
    Trophy Points:
    615
    #9
    Here's a basic example
    https://jsfiddle.net/hzkk5tm5/

    click on the kitten and you go to Google, click on the link and it goes somewhere else. In our instance they go to the same place but I wanted the distinction about what was doing what to be clear.

    Right mouse click on the kitten and you can't open in new tab.
     
    sarahk, Oct 11, 2017 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,433
    Likes Received:
    1,509
    Best Answers:
    220
    Trophy Points:
    515
    #10
    In which case it should be intercepting the default behavior of the anchor -- which is NOT what it sounds like she's doing.

    Since if it was the natural behavior of an anchor, it would already be there on the context menu.

    As the unwritten rule of JavaScript goes:
    Which is why my question is "If this has a link type opening a page behavior, why isn't it an <a>?!?" WHY are you even getting JavaScript involved?

    @hdewantara was closest to correct, using your little fiddle as an example (Chrismas on a cracker how the *** do people use / put up with that damned site? Oh wait, I say the same thing about Git) and fixing the single quotes that illustrate someone doesn't know how to write server side code and the "what the **** makes an image or a sentence fragment link a paragraph?!?". :p

    
    <div class="box">
    	<a href="http://www.google.com" class="overlink">Go to google</a>
    	<p>
    		text line 1
    	</p>
    	<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/articles/health_tools/taking_care_of_kitten_slideshow/photolibrary_rm_photo_of_kitten_in_grass.jpg" width="250px">
    	<br>
    	<a href="/go.php">go here</a>
    </div>
    
    Code (markup):
    The title attribute being an ATTEMPT at making up for the lack of content on the anchor.

    
    .box {
    	position:relative;
    	 width:400px;
    	border:1px solid red;
    }
    
    .box > * {
    	position:relative; /* force code-order depth sorting */
    }
    
    .box .overlink {
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
    	height:100%;
    	text-indent:-999em;
    }
    
    Code (markup):
    getting the scripttardery the *** out of there.

    Now, IF it were doing something like what @digitalpoint said, I'd STILL do it this way. The only difference is I would hook and intercept that anchor and cancel the event -- parsing the HREF to determine the action since the "data" would already be there... and when I say hook I mean from the scripting, remember we've been told for nearly a decade to STOP using onevent attributes since they're blocked under the CSP and should be removed from the HTML specification entirely!

    But to be fair, I think IMG, AUDIO, VIDEO, and EMBED should be stricken from HTML for being redundant to OBJECT... which is what the real successor to HTML 4 Strict was SUPPOSED to do before the WhatWG had to go and piss on everything!

    Hooking an already working anchor means it works scripting on OR off. Fancy modal dialogue when scripting is available? Sure. Fallback to a pageload when scripting off, that too!

    JavaScript 101 people, don't use it when you don't have to, and when you do make sure it still lets the user do something scripting off.
     
    Last edited: Oct 12, 2017
    deathshadow, Oct 12, 2017 IP
  11. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,100
    Likes Received:
    2,575
    Best Answers:
    457
    Trophy Points:
    710
    Digital Goods:
    29
    #11
    @sarahk why not at least do like @deathshadow says and at least use an <a> tag for it? That would probably solve the issue of wanting a context menu for a new tab. If it's an issue of having an <a> within an <a>, just put the inner one after it and use CSS positioning to overlay it?
     
    digitalpoint, Oct 12, 2017 IP
  12. sarahk

    sarahk iTamer Staff

    Messages:
    23,579
    Likes Received:
    3,183
    Best Answers:
    87
    Trophy Points:
    615
    #12
    I'll dummy up something for the actual developers. The box has other stuff going on but there will be a way.

    @deathshadow will be delighted to know the site not only uses javascript but angular! I was really just wanting to be sure that no dinky trick had been added that I didn't know about. I'd searched but thought I'd check.
     
    sarahk, Oct 12, 2017 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,433
    Likes Received:
    1,509
    Best Answers:
    220
    Trophy Points:
    515
    #13
    So the whole thing's a walking talking WCAG violation? Way to make the site useful to users. JUST DETERMINED to sink themselves are they?
     
    deathshadow, Oct 13, 2017 IP