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

【问题标题】：Stop propagation through html's "onclick" event and JS停止通过 html "onclick" 事件和 JS 传播
【发布时间】：2014-09-29 14:29:51
【问题描述】：

这是我的 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 中修复页面默认顶部滚动，但在这种情况下对简单的 JS 无能为力。将代码重写为 JQuery 是不可接受的。尝试将“this”设置为函数的第二个参数，然后 event.preventDefault() - 不起作用。

【问题讨论】：

return false 应该涵盖这一点。检查你的控制台，看看 JS 中是否有任何其他错误可能导致它在结束之前失败。
分离出来似乎可行。必须有一个事件附加到父元素，或者正如汤姆所说，一个导致脚本失败的错误。 codepen.io/anon/pen/fxjbg

标签： javascript html stoppropagation

【解决方案1】：

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

event.stopPropagation()

event 对象默认传递给任何事件的处理函数。因此，不要在内联定义事件处理程序，而是在其中定义一个单独的脚本文件。加载 DOM 后，应附加事件处理程序。您可以按照下面代码sn-p中显示的模式。

//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; 
    });
}

阅读清单

关于避免inline event registration
MDN reference 关于如何停止事件传播
event.PreventDefault and event.stopPropagation 之间的差异
event.PreventDefault and return false 之间的差异

【讨论】：

那参数呢，我通过 html 中的 onclick 事件传递给函数？这还能用吗？
没有。似乎您有与标记相关联的数据，因此最好的方法是 HTML 的 data-* 属性。检查此link。使用上述方法，您将编写 data-type = "light" 并在事件处理程序中使用 this 访问它。

【解决方案2】：

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

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

【讨论】：