javascript 停止通过 html 的“onclick”事件和 JS 传播
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25164036/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stop propagation through html's "onclick" event and JS
提问by tegowai
This is my html chunk
这是我的 html 块
<tr>
<td class="c_menu" id="bat_light">
<a href="someLink/file.html#" onclick="OpenItem('light');return false;">sometitle</a>
</td>
<td class="c_menu" id="bat_econom">
<a href="someLink/file.html#" onclick="OpenItem('econom');return false;">
sometitle</a>
</td>
<td class="c_menu" id="bat_standart">
<a href="someLink/file.html#" onclick="OpenItem('standart');return false;">
sometitle</a>
</td>
<td class="c_menu" id="bat_premium">
<a href="someLink/file.html#" onclick="OpenItem('premium');return false;">
sometitle</a>
</td>
</tr>
and this is JavaScript intro at the top
这是顶部的 JavaScript 介绍
function OpenItem(name){
var blocks = ['light', 'econom', 'standart', 'premium'];
for(var i = 0; i < blocks.length; i++){
if (blocks[i] == name){
document.getElementById('bat_'+blocks[i]).className="c_menu active";
document.getElementById('descr_'+blocks[i]).style.display="block";
document.getElementById('tab_'+blocks[i]).style.display="block";
}
else{
document.getElementById('bat_'+blocks[i]).className="c_menu";
document.getElementById('descr_'+blocks[i]).style.display="none";
document.getElementById('tab_'+blocks[i]).style.display="none";
}
}
}
I understand how to fix page default topscrolling in JQuery,but helpless in this case with simple JS. Rewriting the code to JQuery unacceptable. Tried to set 'this' as second argument to function and then event.preventDefault() - does not work.
我了解如何在 JQuery 中修复页面默认顶部滚动，但在这种情况下使用简单的 JS 无能为力。将代码重写为 JQuery 是不可接受的。试图将“this”设置为函数的第二个参数，然后 event.preventDefault() - 不起作用。
采纳答案by Ajinkya
To stop event propagation you have to use the following method.
要停止事件传播，您必须使用以下方法。
event.stopPropagation()
The eventobject is passed by default to the handler function for any event. So, instead of defining event handlers inline, define in them a separate script file. The event handlers should be attached once the DOM has loaded. You can follow the pattern shown in below code snippet.
该事件对象默认情况下传递给任何事件的处理函数。因此，与其定义内联事件处理程序，不如在其中定义一个单独的脚本文件。一旦 DOM 加载完毕，就应该附加事件处理程序。您可以按照以下代码片段中显示的模式进行操作。
//handles the click event
function handleClick(ev) {
console.log('clicked on ' + this.tagName);
ev.stopPropagation();
}
window.onload = function() {
var links = document.getElementsByTagName('a');
//attaches the event handler to all the anchor tags
Array.prototype.forEach.call(links, function(elem) {
elem.onclick = handleClick;
});
}
Reading List
阅读清单
- On avoiding inline event registration
- MDN referenceon how to stop event propagation
- Difference between event.PreventDefault and event.stopPropagation
- Difference between event.PreventDefault and return false
回答by Roolern
You can write event.stopPropagation() directly in the onclick attribute too.
您也可以直接在 onclick 属性中编写 event.stopPropagation() 。
<div class="example" onclick="someFuntion(); event.stopPropagation();"></div>
<div class="example" onclick="someFuntion(); event.stopPropagation();"></div>
