Search code examples
javascriptevent-bubbling

Javascript stop TR click event on dropdown selection| Not working in IE 11


I want to capture what option has been selected from dropdown.
Here the problem is when option is being clicked TR click event is called because select doesn't have click event.

How can I stop TR click event when dropdown is clicked?

function check1(e) {
  if (typeof e == "undefined")
    e = window.event;
  if (e) {
    var sourceElement = e.srcElement || e.target;
    if (sourceElement) {
      if (sourceElement.getAttribute("data-stop-propagation")) {
        //element being clicked asked to ignore the event, abort
        return;
      }
    }
  }
  alert("TR clicked");
}

function check2() {
  alert("drop_down clicked");
}
<table border=1>
  <tr onclick="check1();">
    <td>My Options</td>
    <td>
      <select name="" id="drop_down" onchange="check2();" data-stop-propagation="1">
              <option value="A">A</option>
              <option value="B">B</option>  
            </select>
    </td>
  </tr>
</table>

[1]: https://jsfiddle.net/oqgdh59o/3/


Solution

  • Taking it back a bit, select.click executes before tr.click which executes before select.change event. Why not just stop propagation when the select is clicked?

    function check1() {
      alert("TR clicked");
    }
    
    function check2() {
      alert("drop_down clicked");
    }
    
    function stopPropagation() {
      event.stopPropagation();
    };
    <table border=1>
      <tr onclick="check1();">
        <td>My Options</td>
        <td>
          <select name="" id="drop_down" onclick="stopPropagation();" onchange="check2();" data-stop-propagation="1">
                  <option value="A">A</option>
                  <option value="B">B</option>  
                </select>
        </td>
      </tr>
    </table>