I have image in button and both button and image has separate onclick functions, when I click this image on button it also executes function on button

Question

This is the button. Imagine button with text B2C01 and next to it svg that works as close. when I click to this image the button disappears but simultaneously it triggers buttons function which does other things and it interferes with my code. how can I stop it from executing when clicking image?

    <button onclick="clickcustomer(this.id)" 
    id="addedprivatecustomerbutton1"
    class="addedprivatecustomerbutton displaynone" type="button" name="button">B2C01
    <img class="removeaddedcustomerbutton" id="addedprivatecustomersvgsvg1" 
    src="img\removeaddedcustomerbutton.svg"
    alt="" onclick="removeprivatecustomer(this.id)"> </button>

Or [How to have click event ONLY fire on parent DIV, not children?](https://stackoverflow.com/q/9183381/215552) if you read jQuery. — Heretic Monkey, Aug 28 '21 at 19:03

score 0 · Answer 1 · answered Aug 28 '21 at 18:56

Your HTML would be,

        <button onclick="clickcustomer()" 
        id="addedprivatecustomerbutton1"
        class="addedprivatecustomerbutton displaynone" type="button" name="button">B2C01
        <img class="removeaddedcustomerbutton" id="addedprivatecustomersvgsvg1" 
        src="img\removeaddedcustomerbutton.svg"
        alt="" onclick="removeprivatecustomer(event)"> </button>

and JS would be,

  removeprivatecustomer(e){
    console.log("removeprivatecustomer")
    e.stopPropagation();
    console.log("removeprivatecustomer after stopPropagation")
  }

  clickcustomer(){
    console.log("clickcustomer")
  }

score -1 · Answer 2 · answered Aug 28 '21 at 18:54

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; 
charger=utf-8" />
    <meta name="" content="">
   <title></title>
  </head>
  <body>

 <button id="btn" onclick="stack_fn(this)">
   <img id="img" src="stack.png" alt="stack" 
onclick="stack_fn(this)">
 </button>

 <script type="text/javascript" charset="utf-8">
  function stack_fn(elm)
  {
     if(elm.id === "img")
     alert(elm);
   }
 </script>
  </body>
</html>

Because bubbling, just stop bubbling or check target element — Pardip Lal, Aug 28 '21 at 18:55

I have image in button and both button and image has separate onclick functions, when I click this image on button it also executes function on button

2 Answers2