I have a select control nested inside a table cell. The Table row that contains the table cell has an onclick event. When I click on the select control to change the value the onclick event of the row is fired.

I've tried using the stoppropagation method on the onchange event but it doesn't seem to work.

Below is my code

xxxxxxx.Helper.DDGoto = function (o, e) {
    e.stopPropagation();
    var path = $(o).val();

    if (path != null) {
        this.Goto(path);
    }
}



   <tr onclick="somemethod()">
     <td>some text</td>
     <td>
      <select onchange="xxxxxxx.Helper.DDGoto(this, event)">some options</select>
    </td>
</tr>

I have a select control nested inside a table cell. The Table row that contains the table cell has an onclick event. When I click on the select control to change the value the onclick event of the row is fired.

I've tried using the stoppropagation method on the onchange event but it doesn't seem to work.

Below is my code

xxxxxxx.Helper.DDGoto = function (o, e) {
    e.stopPropagation();
    var path = $(o).val();

    if (path != null) {
        this.Goto(path);
    }
}



   <tr onclick="somemethod()">
     <td>some text</td>
     <td>
      <select onchange="xxxxxxx.Helper.DDGoto(this, event)">some options</select>
    </td>
</tr>

• javascript
• html

• Your xxxxxxx.Helper.DDGoto is not fired by click, but by change. So the e.stopPropagation(); inside is never executed! – cFreed Commented Aug 1, 2016 at 10:26
• Add the $('select').on('click', function(e) { e.stopPropagation();}) and it works – Marcos Pérez Gude Commented Aug 1, 2016 at 10:30
• Is this because onchange and click are not the same event type? – Richard Banks Commented Aug 1, 2016 at 10:42

2 Answers 2

The event triggered with the onchange event on your select is not firing the onclick event on your tr, they are not of the same type. They are two different events. That's also why stopping propagation of the onchange event does not stop the onclick event to be triggered.

You should instead in your onclick handler check if the select element was clicked or not:

somemethod = function (event) {
  if (event.target.nodeName === 'SELECT') {
    // The select was clicked, stopping...
    return;
  }

  // The select was not clicked, go ahead...
}

To get the event in your handler, you need to change your declaration to:

<tr onclick="somemethod(event)">

I used the nodeName property for the example, but you could also use the type property of the target or any other method to detect if the select was clicked or not.

You can check this fiddle for an example.

When you click on select tag, both onChange and onClick event is fired! I solved this by creating a onClick handler along side onChange handle and then calling e.stopPropogation() function.

Worked for me!

 <select (click)="StopPropogation($event)"  (change)="textureChanged($event,i)" class="form-control" id="sel1">
                            <option  selected="isTextureSolid(nodule.texture)">solid</option>
                            <option selected="isTexturePartSolid(nodule.texture)">part-solid</option>
                            <option selected="isTextureNonSolid(nodule.texture)">non-solid</option>
                            </select>

Javascript code:

StopPropogation(e: Event) {
  e.stopPropagation();
  console.log('Click event stopped from propogating');
}

textureChanged(e: Event, i: number) {

  e.stopPropagation();
  console.log('textTure Changed');
  let btnId = 'save' + i.toString();
  document.getElementById(btnId).style.display = 'block';
  document.getElementById(btnId).style.visibility = 'visible';

}