我在表中有一个关于事件传播的问题，我在这个表中动态创建了元素。
当我点击我的div“menuBtn”（我们将其称为“按钮”）时，会发生onclick操作。
我需要不执行的动作。
我在“按钮”功能中添加了event.stopPropagation();，但这并没有改变任何内容。
有关工作示例，请参阅下面的代码段：
// Open menu function
function open_menu(elm) {
elm.css({
"top": PosY,
"left": PosX
}).fadeIn(200);
}
// Mouse move
var PosX, PosY;
$(document).mousemove(function(e) {
PosX = e.pageX;
PosY = e.pageY;
});
// If document is clicked somewhere else than the menu, close menu
$(document).on("mousedown", function(e) {
$(".menu").fadeOut(100);
});
// I bind my function on click, on the menuBtn.
// I am doing it this way because .menuBtn are created dynamically
$('table').on('click', '.menuBtn', function(event) {
event.stopPropagation(); // Why it isn't working ?
open_menu($(this).closest('tr').find(".menu"));
});* {
margin: 0;
padding: 0;
}
p {
display: inline-block;
cursor: inherit;
}
table {
table-layout: fixed;
width: 100%;
border: 0;
border-collapse: collapse;
margin-bottom: 800px;
}
tr {
background-color: #eee;
cursor: pointer;
}
td {
position: relative;
padding-left: 10px;
height: 64px;
}
.menuBtn {
position: absolute;
display: inline-block;
left: 100px;
}
.menu {
position: fixed;
display: none;
background: #f8f8f8;
border: 2px solid #888;
height: 80px;
width: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tbody>
<tr onclick="console.log('I do not want to see that.')">
<td>
<p>Element</p>
<div class='menuBtn' title='Open menu'>[ ↓ ]</div>
</td>
<td>
<ul class="menu">
<p>menu of “Element”</p>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
我做错了什么？ 拜托，赐教。
答案 0 :(得分：1)
您将委派的事件绑定到<table>，这将监听事件并检查此事件的触发元素是否与.menuBtn匹配。因此直接绑定到<tr>的事件与按钮点击事件无关。
此代码段与您的相同。您可以看到tr事件之前触发的.menuBtn事件。在这种情况下，这两个事件就像平行线一样。
// Open menu function
function open_menu(elm) {
elm.css({
"top": PosY,
"left": PosX
}).fadeIn(200);
}
// Mouse move
var PosX, PosY;
$(document).mousemove(function(e) {
PosX = e.pageX;
PosY = e.pageY;
});
// If document is clicked somewhere else than the menu, close menu
$(document).on("mousedown", function(e) {
$(".menu").fadeOut(100);
});
$('tr').on('click', function(){
console.log('tr clicked')
})
// I bind my function on click, on the menuBtn.
// I am doing it this way because .menuBtn are created dynamically
$('table').on('click', '.menuBtn', function(event) {
event.stopPropagation(); // Why it isn't working ?
console.log('btn clicked')
open_menu($(this).closest('tr').find(".menu"));
});* {
margin: 0;
padding: 0;
}
p {
display: inline-block;
cursor: inherit;
}
table {
table-layout: fixed;
width: 100%;
border: 0;
border-collapse: collapse;
margin-bottom: 800px;
}
tr {
background-color: #eee;
cursor: pointer;
}
td {
position: relative;
padding-left: 10px;
height: 64px;
}
.menuBtn {
position: absolute;
display: inline-block;
left: 100px;
}
.menu {
position: fixed;
display: none;
background: #f8f8f8;
border: 2px solid #888;
height: 80px;
width: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tbody>
<tr>
<td>
<p>Element</p>
<div class='menuBtn' title='Open menu'>[ ↓ ]</div>
</td>
<td>
<ul class="menu">
<p>menu of “Element”</p>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
要显示tr事件不会通过点击.menuBtn传播，这是一个演示：
// Open menu function
function open_menu(elm) {
elm.css({
"top": PosY,
"left": PosX
}).fadeIn(200);
}
// Mouse move
var PosX, PosY;
$(document).mousemove(function(e) {
PosX = e.pageX;
PosY = e.pageY;
});
// If document is clicked somewhere else than the menu, close menu
$(document).on("mousedown", function(e) {
$(".menu").fadeOut(100);
});
$('tr').on('click', function(){
console.log('tr clicked')
})
// added for demonstration
$('table').on('click', function(){
console.log('table clicked')
})
// I bind my function on click, on the menuBtn.
// I am doing it this way because .menuBtn are created dynamically
$('table').on('click', '.menuBtn', function(event) {
//event.stopPropagation(); // Why it isn't working ?
console.log('btn clicked')
open_menu($(this).closest('tr').find(".menu"));
});* {
margin: 0;
padding: 0;
}
p {
display: inline-block;
cursor: inherit;
}
table {
table-layout: fixed;
width: 100%;
border: 0;
border-collapse: collapse;
margin-bottom: 800px;
}
tr {
background-color: #eee;
cursor: pointer;
}
td {
position: relative;
padding-left: 10px;
height: 64px;
}
.menuBtn {
position: absolute;
display: inline-block;
left: 100px;
}
.menu {
position: fixed;
display: none;
background: #f8f8f8;
border: 2px solid #888;
height: 80px;
width: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tbody>
<tr>
<td>
<p>Element</p>
<div class='menuBtn' title='Open menu'>[ ↓ ]</div>
</td>
<td>
<ul class="menu">
<p>menu of “Element”</p>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
这一个绑定委托事件，显示首先触发.menuBtn事件。导致它从.menuBtn传播到table。
// Open menu function
function open_menu(elm) {
elm.css({
"top": PosY,
"left": PosX
}).fadeIn(200);
}
// Mouse move
var PosX, PosY;
$(document).mousemove(function(e) {
PosX = e.pageX;
PosY = e.pageY;
});
// If document is clicked somewhere else than the menu, close menu
$(document).on("mousedown", function(e) {
$(".menu").fadeOut(100);
});
$('table').on('click', 'tr', function(){
console.log('tr clicked')
})
// added for demonstration
$('table').on('click', function(){
console.log('table clicked')
})
// I bind my function on click, on the menuBtn.
// I am doing it this way because .menuBtn are created dynamically
$('table').on('click', '.menuBtn', function(event) {
// event.stopPropagation(); // Why it isn't working ?
console.log('btn clicked')
open_menu($(this).closest('tr').find(".menu"));
});* {
margin: 0;
padding: 0;
}
p {
display: inline-block;
cursor: inherit;
}
table {
table-layout: fixed;
width: 100%;
border: 0;
border-collapse: collapse;
margin-bottom: 800px;
}
tr {
background-color: #eee;
cursor: pointer;
}
td {
position: relative;
padding-left: 10px;
height: 64px;
}
.menuBtn {
position: absolute;
display: inline-block;
left: 100px;
}
.menu {
position: fixed;
display: none;
background: #f8f8f8;
border: 2px solid #888;
height: 80px;
width: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tbody>
<tr>
<td>
<p>Element</p>
<div class='menuBtn' title='Open menu'>[ ↓ ]</div>
</td>
<td>
<ul class="menu">
<p>menu of “Element”</p>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
因此，如果您想要阻止此问题，请同时使用委托事件{.1}}。
<tr>// Open menu function
function open_menu(elm) {
elm.css({
"top": PosY,
"left": PosX
}).fadeIn(200);
}
// Mouse move
var PosX, PosY;
$(document).mousemove(function(e) {
PosX = e.pageX;
PosY = e.pageY;
});
// If document is clicked somewhere else than the menu, close menu
$(document).on("mousedown", function(e) {
$(".menu").fadeOut(100);
});
$('table').on('click', 'tr', function(){
console.log('I do not want to see that.')
})
// I bind my function on click, on the menuBtn.
// I am doing it this way because .menuBtn are created dynamically
$('table').on('click', '.menuBtn', function(event) {
event.stopPropagation(); // Why it isn't working ?
open_menu($(this).closest('tr').find(".menu"));
});* {
margin: 0;
padding: 0;
}
p {
display: inline-block;
cursor: inherit;
}
table {
table-layout: fixed;
width: 100%;
border: 0;
border-collapse: collapse;
margin-bottom: 800px;
}
tr {
background-color: #eee;
cursor: pointer;
}
td {
position: relative;
padding-left: 10px;
height: 64px;
}
.menuBtn {
position: absolute;
display: inline-block;
left: 100px;
}
.menu {
position: fixed;
display: none;
background: #f8f8f8;
border: 2px solid #888;
height: 80px;
width: 100px;
}
如果有任何错误，误导或不清楚，请随时告诉我或编辑该帖子。