停止通过 html 的 "onclick" 事件和 JS 传播

Question

这是我的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>

上面是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";
        }
    }
}

我了解如何在JQuery中修复页面默认的topscrolling，但在这种情况下使用简单的JS无助。将代码重写为JQuery是不可接受的。试图将'this'设置为函数的第二个参数，然后event.preventDefault() -不起作用。

Answer 1

要停止事件传播，必须使用以下方法:

event.stopPropagation()

event对象默认情况下传递给任何事件的处理函数。因此，不是内联定义事件处理程序，而是在它们中定义一个单独的脚本文件。事件处理程序应该在加载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; 
    });
}

阅读列表

• 关于避免内联事件注册
关于如何停止事件传播的MDN参考
• 事件之间的差异。PreventDefault和event.stopPropagation
• 事件之间的差异。PreventDefault并返回false

Answer 2

也可以直接在onclick属性中编写event.stopPropagation()

<div class="example" onclick="someFuntion(); event.stopPropagation();"></div>