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>
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>