下拉选择上的Javascript停止TR单击事件
我想捕获从下拉列表中选择的选项。这里的问题是在单击选项时调用TR click event，因为下拉选择上的Javascript停止TR单击事件,javascript,html,html-select,Javascript,Html,Html Select,我想捕获从下拉列表中选择的选项。这里的问题是在单击选项时调用TR click event，因为select没有click event。 单击下拉列表时，如何停止TR click事件 <html> <script> function check1() { alert("TR clicked"); } function check2() { alert("drop_down clicked"); } </
select<html>
<script>
function check1() {
alert("TR clicked");
}
function check2() {
alert("drop_down clicked");
}
</script>
<table border=1>
<tr onclick="check1();">
<td>My Options</td>
<td>
<select name="" id="drop_down" onchange="check2();">
<option value="A">A</option>
<option value="B">B</option>
</select>
</td>
</tr>
</table>
函数检查1（）{
警报（“TR”）；
}
函数检查2（）{
警报（“单击下拉按钮”）；
}
我的选择
A.
B
您需要捕获
上的单击事件并防止其传播：
function onSelectClick(ev) {
ev.stopPropagation();
}
<select onclick="onSelectClick">
您需要捕获上的单击事件并防止其传播：
function onSelectClick(ev) {
ev.stopPropagation();
}
<select onclick="onSelectClick">
您只需检查触发单击的元素，如果是下拉列表，则忽略该事件：
function check1(e) {
if (typeof e == "undefined")
e = window.event;
if (e.srcElement.id != "drop_down") {
alert("TR clicked");
}
}
如果希望JS更通用，并且不检查元素的特定ID，还可以更改其逻辑以查找定义了自定义属性的元素：
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");
}
要使其与代码一起工作，请将HTML更改为：（属性的值无关紧要）
您只需检查触发单击的元素，如果是下拉列表，则忽略事件：
function check1(e) {
if (typeof e == "undefined")
e = window.event;
if (e.srcElement.id != "drop_down") {
alert("TR clicked");
}
}
如果希望JS更通用，并且不检查元素的特定ID，还可以更改其逻辑以查找定义了自定义属性的元素：
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");
}
要使其与代码一起工作，请将HTML更改为：（属性的值无关紧要）
您可以做的另一件事是获取事件目标
function check1() {
if(this.event.target.nodeName!=='SELECT'){
alert("TR clicked");
}
}
要在所有浏览器中支持，只需捕获事件并将其作为参数传递即可
<tr onclick=check1(event)>....</tr>
//in js
function check1(event) {
if(event.target.nodeName!=='SELECT'){
alert("TR clicked");
}
}
。。。。
//在js中
功能检查1（事件）{
if（event.target.nodeName！=“选择”）{
警报（“TR”）；
}
}
您可以做的另一件事是获取事件目标
function check1() {
if(this.event.target.nodeName!=='SELECT'){
alert("TR clicked");
}
}
要在所有浏览器中支持，只需捕获事件并将其作为参数传递即可
<tr onclick=check1(event)>....</tr>
//in js
function check1(event) {
if(event.target.nodeName!=='SELECT'){
alert("TR clicked");
}
}
。。。。
//在js中
功能检查1（事件）{
if（event.target.nodeName！=“选择”）{
警报（“TR”）；
}
}
使用addEventListener（）
而不是内联属性EventHandler。在eventListener（）
的末尾，或者在回调的末尾，添加e.stopPropagation（）
，这样事件就永远不会冒泡，从而永远不会到达
需要被引用，因为它是相对于另一个表组件的，例如
或
。尽管内联属性事件会附着到任何内容（包括
标记），但它将对维护这样的布局有害（因为我怀疑它已经发生了）。这就是为什么强烈建议使用addEventListener（）
代替内联事件
在以下演示中：
- 如果单击
，控制台将记录其值
- 如果单击了
，则会记录一个通用的“单击”
- 它不会在单击事件时同时记录这两个事件
支持所有现代浏览器
演示中评论的详细信息
演示
var table=document.querySelector（'table'）；
函数chk（）{
var drop=document.getElementById（'drop'）；
var val=drop.value
控制台日志（val）；
}
函数rowLog（）{
console.log（'Clicked'）；
}
表.addEventListener（'click'，函数（e）{
/*如果单击的元素（例如，目标）不是
||已注册以侦听的元素
||单击事件（表），然后。。。
*/
如果（e.target！==e.currentTarget）{
/*如果单击元素的#id为drop
||调用函数chk（）
*/
如果（e.target.id=='drop'）{
chk（）；
/*阻止事件冒泡（从而
||事件永远不会到达TR（如果#单击drop）
*/
e、 停止传播（）；
}
/*TR与TD so紧密结合
||目标TD或spicify t车身或桌子
||参考TR。
||注e.未调用stopPropagation（）
||在此函数中，单击事件将
||冒泡
*/
else if（e.target.tagName==“TD”）{
rowLog（）；
}
}
}，假）
我的选择
A.
B
使用addEventListener（）
而不是内联属性EventHandler。在eventListener（）
的末尾，或者在回调的末尾，添加e.stopPropagation（）
，这样事件就永远不会冒泡，从而永远不会到达
需要被引用，因为它是相对于另一个表组件的，例如
或
。尽管内联属性事件会附着到任何内容（包括
标记），但它将对维护这样的布局有害（因为我怀疑它已经发生了）。这就是为什么强烈建议使用addEventListener（）
代替内联事件
在以下演示中：
- 如果单击
，控制台将记录其值
- 如果单击了
，则会记录一个通用的“单击”
- 它不会在单击事件时同时记录这两个事件
支持所有现代浏览器
演示中评论的详细信息
演示
var table=document.querySelector（'table'）；
函数chk（）{
var drop=document.getElementById（'drop'）；
var val=drop.value
控制台日志（val）；
}
函数rowLog（）{
console.log（'Clicked'）；
}
表.addEventListener（'click'，函数（e）{
/*如果单击的元素（例如，目标）不是
||已注册以侦听的元素
||单击事件（表），然后。。。
*/
如果（e.target！==e.currentTarget）{
/*如果单击元素的#id为drop
||调用函数chk（）
*/
如果（e.target.id=='drop'）{
chk（）；
/*阻止事件冒泡（从而
||事件永远不会到达TR（如果#单击drop）
*/
e、 停止传播（）；