下拉选择中的Javascript停止TR点击事件 [英] Javascript stop TR click event on dropdown selection
问题描述
我想捕获从下拉菜单中选择的选项.这里的问题是当单击选项时，因为select没有单击事件，所以调用TR单击事件.
单击下拉菜单时如何停止TR单击事件?
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 drop down is clicked?
<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>
推荐答案
使用addEventListener()代替内联属性eventHandlers.在eventListener()的末尾或回调的末尾，添加e.stopPropagation()，这样事件就不会冒泡，从而永远也不会到达<tr>.
Use addEventListener() instead of inline attribute eventHandlers. At the end of the eventListener(), or at the end of callback, add e.stopPropagation() so the event never bubbles thereby never reaching <tr>.
<tr>将需要引用，因为它是相对于另一个表组件(例如，<table>或<td>)而言的.尽管内联属性事件会粘在任何东西上(包括<tr>标记)，但它将对维护这样的布局有害(如我所怀疑的那样，已经在发生).这就是为什么强烈建议使用addEventListener()代替内联事件的原因.
<tr> will need to be referenced as it is relative to another table component such as <table> or <td>. Although inline attribute events stick to anything (including a <tr> tag), it will become detrimental to maintaining such a layout (as I suspect it is already occurring). This is why it has been strongly suggested that addEventListener() be used instead of inline events.
在以下演示中:
-
如果单击
<select>，控制台将记录其值.
If
<select>is clicked the console logs its value.
如果单击<td>，则会记录一个通用的"click"
If a <td> is clicked then it logs a generic 'click'
在点击事件时不会同时记录两者
It will not log both at click event
所有现代浏览器均受支持
All modern browsers are supported
演示中评论的详细信息
var table = document.querySelector('table');
function chk() {
var drop = document.getElementById('drop');
var val = drop.value
console.log(val);
}
function rowLog() {
console.log('Clicked');
}
table.addEventListener('click', function(e) {
/* if the clicked element (e.target) is NOT
|| the element registered to listen for
|| click event (table) then...
*/
if (e.target !== e.currentTarget) {
/* if clicked element's #id is drop
|| call function chk()
*/
if (e.target.id === 'drop') {
chk();
/* Stop the event from bubbling (thereby
|| event never reaches TR if #drop is clicked)
*/
e.stopPropagation();
}
/* TR is tightly integrated with TD so
|| target TD or spicify TBODY or TABLE
|| to reference TR.
|| Note e.stopPropagation() is not invoked
|| in this function so click event will
|| bubble to <tr>
*/
else if(e.target.tagName === 'TD') {
rowLog();
}
}
}, false);
<table border=1>
<tr>
<td>My Options</td>
<td>
<select name="" id="drop">
<option></option>
<option value="A">A</option>
<option value="B">B</option>
</select>
</td>
</tr>
</table>
这篇关于下拉选择中的Javascript停止TR点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
