如何工作锚标签内的图像相似

Question

<a href="xyz.php"><div id="some_id"><p>
<span class="storeName">name</span>
<span>phone number</span>
</p><img onclick="javascript:printStoreMap('+ e[0] +');" 
alt="Print Map"
src="/images/btn_print_map.png"></div></a>

This is my code.

The behavior i want is if i should click on div it should go to xyz.php. and if i will click on Print Map image than some thing else should happen and click event of anchor tag should not work means it should not go to the xyz.php page. only that javascript function should work.

How can i do this? I am not getting this. So if any body have idea how can i accomplish this then kindly tell that way.

Answer 1

Why don't you move the <img> outside the <a> tag? (If you want it to work for keyboard users you should give it its own <a> tag and put the onclick on the <a> .)

Also, what's the point of the <div> ? What does it let you do that you can't do with the existing <a> ?

EDIT: If you must have the div element - and really you shouldn't need it for styling when you can style the anchor element - and you want the image inside the same div, then why not have two anchors, one for each thing you want to be able to click on:

<div id="some_id">
  <a href="xyz.php">
    <p>
      <span class="storeName">name</span>
      <span>phone number</span>
    </p>
  </a>
  <a onclick="printStoreMap('+ e[0] +'); return false;">
    <img alt="Print Map" src="/images/btn_print_map.png">
  </a>
</div>

Again, having two anchors makes it useable for keyboard users.

(Otherwise, to keep your HTML exactly as is which in my opinion is a bad idea you could read up on event preventDefault() , stopPropagation() , and/or cancelBubble .)

By the way, what's with trying to include a variable in the middle of a string here: "javascript:printStoreMap('+ e[0] +');" (Should it have been double-quotes everywhere, or is the whole block of HTML part of some string assignment with single-quotes that you haven't posted, or...?) Note also that you don't need the word javascript when assigning an event handler.