onclick function gets called when clicking link on top

Question

I have a link linking to user pages on posts, and the post itself opens a dedicated page for the post, when clicked on: $userid = $entry['userid'];

$username = getUserName($userid);
$created_at = DateTime::createFromFormat('Y-m-d H:i:s', $entry['created_at']);
echo "<div class=\"".$class."\" onclick=\"postById(".$entry['id'].")\"><p class=\"info\">Posted by <a class=\"userlink\" onclick=\"userById(".$userid.")\">".$username."</a> on ".$created_at->format('j.n.Y')." at ".$created_at->format('H:i')."</p>";
echo "<h2 class=\"title\">".$entry['title']."</h2>";
echo $entry['content']."</div>";

The functions:

function postById(postid) {
  let form = document.createElement('form');
  form.action = 'post.php'
  form.method = 'GET'
  form.innerHTML = '<input name="postid" class="hidden" value="' + postid + '">';
  document.body.append(form);
  form.submit()
}
function userById(userid) {
  let form = document.createElement('form');
  form.action = 'user.php'
  form.method = 'GET'
  form.innerHTML = '<input name="userid" class="hidden" value="' + userid + '">';
  document.body.append(form);
  form.submit()
}

When clicking on the post, it redirects to its page, as it should. But when clicking on the link, the post page opens anyway. userById() still gets called, but after postById() , and by my understanding breaks with the first redirect.

How can I stop the div from recognising a click when clicking the link ontop?

Illustration of how it should be Green = userById() ; orange = postById()

Answer 1

Try limiting the scope of the onClick listener to where you want it to work

Try this

echo "<div class=\"".$class."\"><p class=\"info\"><a onClick=\"postById(".$entry['id'].")\">Posted by </a><a class=\"userlink\" onClick=\"userById(".$userid.")\">".$username."</a> <a onClick=\"postById(".$entry['id'].")\">on ".$created_at->format('j.n.Y')." at ".$created_at->format('H:i')."</a></p>";

Answer 2

Function postById(postid) {
      disableOtherLinks(); //You must define it ;)
      ...

OR

var called = false;

Function postById(postid) {
     if( called ) return false;
     called = true;
     ...

Function userById(userid) {
     if( called ) return false;
     called = true;
     ...

Answer 3

You could use event.stopPropagation() to suppress the click event from traveling to the parent element. Here's an example of this in action, click the red to trigger the div, green for the link only.

So for your DOM:

echo "<div class=\"".$class."\" onclick=\"postById(".$entry['id'].")\"><p class=\"info\">Posted by <a class=\"userlink\" onclick=\"userById(event, ".$userid.")\">".$username."</a> on ".$created_at->format('j.n.Y')." at ".$created_at->format('H:i')."</p>";

Your handling Javascript:

function userById(event, userid) {
  event.stopPropagation();
  let form = document.createElement('form');
  form.action = 'user.php'
  form.method = 'GET'
  form.innerHTML = '<input name="userid" class="hidden" value="' + userid + '">';
  document.body.append(form);
  form.submit()
}