Priority in clicking on links!

[dhcpeters]

I have the folowing code:

 

<script>

function open_win1()

{

window.open("http://www.dekentering.info/PaginaActiviteiten.html", "_self");

}

</script>

<section id="Aankondiging">

<div onclick="open_win1()">

<table width="100%" border="0">

<tr>

<td class="TekstNieuwsvak" align="left"><p> </p><font color="#FFFFFF">Komende cursussen:<br><br>

<font color="#FFFFFF"><a href="PaginaActiviteiten.html#WRAP" target="_self">WRAP</a><br>

<font color="#FFFFFF"><a href="PaginaActiviteiten.html#WMEE" target="_self">WMEE</a><br>

<font color="#FFFFFF"><a href="PaginaActiviteiten.html#Herstelwerkgroep" target="_self">Herstelwerkgroep</a><br><br>

<font color="#0066CC">Meer informatie...</font><br><br></td>

</tr>

</table>

</div>

</section>

 

 

The whole section is clickable and the function opens a new page.

However in this section I have "sublinks" and how I want it to work is that when a link is clicked (see bold text) the page should open on it's anchor p.e. #WRAP #WMEE #Herstelwerkgroep

But this doesn't do what it should.

The click on the sublinks are treated the same way as clicking on the whole section.

 

My question is: How can I give the click on the "sublinks" priority on the click on the whole section?

Edited February 1, 2017 by dhcpeters

[Ingolme]

When assigning events through Javascript, an event object is passed through with information about what was clicked on.

 

Change your <div> element to have an identifier:

 <div id="section-link">

Then add an event listener (this script has to be AFTER the div in the document):

<script>
document.getElementById("section-link").addEventListener("click", open_win1);
function open_win1(e) {
  // "e" contains information about the event
  // e.target refers to the element that was clicked on
  // Only open the window if the clicked element does not have an href attribute
  if(!e.target.hasAttribute("href")) {
     window.open("http://www.dekentering.info/PaginaActiviteiten.html", "_self");
  }
}
</script>

There are many different ways to identify the element, you could also check that e.target == e.currentTarget, where currentTarget refers to the <div> element and e.target is the element that was clicked on.

[dhcpeters]

ok

 

if(!e.target.hasAttribute("href")

 

but what is that target is an id on another page? What attribute is that?

[dsonesuk]

On every event click within that div it checks if that element that was clicked 'DOES NOT HAVE' denoted by '!' a 'href' attribute, like all the anchor sub-links, if it does not! It can only be the div element area itself, so it should open the new window, while the sub-links will act as they normally would.

[dhcpeters]

Ok I am almost there.

 

But the "sub-links" also have the attribute 'href'

So it does nothing

The target always has an href attribute in my case.

 

thx for your support by the way!

[dsonesuk]

I don't understand what you are trying to say? Anywhere in the div area, THAT IS NOT! A element with attribute 'href' if clicked, will open a new window, else open link.

 

'e' represents the actual event of 'click' in this case, while 'target' is the element the event was triggered from.

[Ingolme]

The example I showed you will only run the Javascript code if the element that you clicked on is not a link.

 

Perhaps you haven't made your requirements clear. What exactly do you want it to do?