Member Avatar for jbh6gc

I have a website where I am making a calendar and inside each day cell I have a list of events where each name is a link to a information page on that link. Also, each day cell is a link to a page with a more in-depth list of events for that day (for when the events don't fit on the actual calendar. Below is the code for one of these cells:

<td height="125px" width="143" align="center" bgcolor="#000000" Onclick="window.open('lessonDay.php?month=4&day=18&year=2009','_blank','height=460, width=410,scrollbars=no')"; style="cursor:pointer;">
<div ="events">
<a href="javascript:void(0)" onclick="window.open('Lessons.php?lessonID=3','Guitar','height=460, width=410,scrollbars=no')"> Guitar </a>
<br>
</div>
</td>

Now my problem. When I click on the cell it takes me to the desired page, but when I click on one of the individual events within the cell it takes me to both the day page and the event page, because the event links are directly ontop of the cell link. I could avoid this "stacked" linking, but I'd rather make it work if I can.

So, is there anyway to make the click only active the event link when it is clicked and not activate the cell link?

Thank you,
Joe Hawkes-Cates

  • 3 Contributors
  • 2 Replies
  • 118 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

The immediate cause is event bubbling: the anchor’s click fires, then the click bubbles up to the cell’s onclick, so both handlers run. correctly flagged a broken element (<div ="events">) — fix the markup first (for example use class="events") and give each anchor a real href (better for accessibility than javascript:void(0)).

A simple, robust fix is to stop propagation on the event link so the parent cell never sees the click. Attach a handler (unobtrusive JS is easiest to maintain):

document.querySelectorAll('.calendar td a').forEach(function(link) {
  link.addEventListener('click', function(e) {
    e.stopPropagation();
    e.preventDefault(); // optional if you open via JS
    window.open(this.href, '_blank', 'height=460,width=410,scrollbars=no');
  }, false);
});

If you must keep inline handlers, add a stop for older browsers too:

onclick="window.open(this.href, '_blank'); if (event && event.stopPropagation) event.stopPropagation(); else window.event.cancelBubble = true; return false;"

Notes and best practices: prefer real href values and target="_blank" plus rel="noopener noreferrer" for security; avoid sticky inline onclick on every td — use event delegation on the calendar container to open day pages, and keep event links responsible for stopping propagation. For modern alternatives, the CSS trick td { pointer-events: none; } td a { pointer-events: auto; } can also isolate clicks but has compatibility caveats. See Event.stopPropagation docs for details: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation and pointer-events notes: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events.

This will prevent the “stacked” open behavior while keeping links accessible and maintainable.

Recommended Answers

All 2 Replies

Member Avatar for Member #119018

I have no idea what you are talking about. Can you show an example?

Member Avatar for MidiMagic

Line 2 is busted code. What did you leave out before the = sign?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.