Which element takes control?

I have a thumbnail nested as such…

<ul>
    <li>
        <a href=''>
            <img src="" alt="" />
        </a>
    </li>
</ul>

When a user clicks on the thumbnail, which element becomes the target? (Is that the right term?)

Is it the image?

The anchor?

The list item?

Or the whole unordered list?

@UpstateLeafPeeper,

None of those. :rofl:

What I would suggest you do is create a test page with this code…

<ul>
    <li>
        <a href=" ">
            <img src="some-image.jpg" width="324" height="200" alt="some image">
        </a>
    </li>
</ul>

…and with this CSS…

ul {
    margin-top: 60em;
 }

Then observe what happens. :winky:

This is way to learn methodology. :biggrin:

coothead

@Coothead,

I don’t follow you. Your code would move the < ul > off the screen.

I was asking when I click on a thumbnail, am I really clicking on the < img > or is it the < a > or the < li > that receives the click?

That is correct, but I want you to find the answer to your question…

Clicking on the thumbnail will provide the answer. :biggrin:

coothead

Well, your href has spaces in it.

I know the code you helped me out with we made the < li > the target of the < a >.

And when you click on the thumbnail that fired things, so that makes me think the answer is that the anchor in this case receives the action?

Well, remove it then. :rolleyes:

If you tested the code, then this is
what you should have observed…

  1. scrolling down was required to locate to the a element
  2. clicking the a element scrolls back to the top of the page.
  3. this is the original state of the page.

coothead

@coothead,

I did your example but am still not sure I follow you…

My question was which element is really capturing the “click” in my code above.

I ask this because I am trying to write some Javascript to populate the src to load the larger image only after the user clicks on the thumbnail, and I wasn’t 100% certain if the LI or A or IMG is receiving the “click”. (Javascript will supposedly care about this!!)

Not seeing how your practice lab answers this…

I would like to point out that the original
question that you asked was…

…and it was to that question that my
replies have attempted to address :winky:

The answer to this question…

…is quite simple…

“The only element in your code above
is the a element
. :biggrin:

coothead

1 Like

UL, LI and IMG are not elements?

When I click on the thumbnail is that transferring the click from the IMG to the A?

Or am I never really clicking on the IMG?

The image, like text content, gives the
a element visibility and thus allows the
user to to activate - (click) - it. :biggrin:

coothead

1 Like

Okay, I get it now.

The < img > is just like the text in…

<a href="">Thanks Coothead!</a>

:wink:

2 Likes

 
 

   <h1>Glory hallelujah, you've seen the light</h1>

 
coothead

1 Like

Enlightening. @coothead. Thank so much for being so much patience in the whole discussion.
@UpstateLeafPeeper, Thank you so much for posting.

Not swift, but I get there eventually… :sunglasses:

1 Like

Learning process is never a straight line, but no-fixed pattern curves. Sorry for interfering in your discussions. Happy Learning.

Now hopefully I will “see the light” - after supper - on my Javascript issue…

Which is where I was thinking this thread was headed. Because in the Javascript world, the answer flips from ‘None of those’ to ‘All of those’ :wink:

@m_hutley,

You lost me…

JavaScript may be used to apply event handlers to
all of the the elements in your posted code but only
works if it is enabled by the user.

HTML only applies the event handler to the a element
and always works unless disabled by JavaScript.

Further reading:-

  1. MDN - DOM onevent handlers
  2. MDN - EventTarget.addEventListener()

I hope that we have now found you. :biggrin:

coothead

1 Like

Specifically, Javascript (by default - there is mechanism to stop it) will ‘bubble up’ click events - meaning that clicking on the image also counts as clicking on the link, and the li, and the ul - any click events attached to any of those elements will fire.

But that’s getting beyond the scope of this thread at this point; if you want to continue exploring that, I suggest we break a couple of these posts off into a new one.

2 Likes