title: Selectively interacting with an image in UI
body: <p>I am quite new to HTML,CSS,JS. So please bear my noob questions.</p>
  
  <p>I am working on a UI application.</p>
  
  <p>One of the UI element is a horizontal bar.This bar resides inside a div.This bar contains an image and a name for the image. User can click anywhere on the bar, and a js functionality is invoked(say A).</p>
  
  <p>I now need to add another image to this bar. And when user mouse clicks this image, a js function is to be called(say B). I see an issue here.</p>
  
  <p>As this image is a part of the bar, so clicking it would call A. I need to stop this call, and make sure that only B is called when user clicks this new image.
  Clicking on any other part of the bar would still call A.</p>
  
  <p>How can this be achieved?</p>