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()

事件对象默认传递给任何事件的处理函数。因此，不是内联定义事件处理程序，而是在其中定义单独的脚本文件。一旦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; 
    });
}

阅读清单

避免inline event registration
MDN reference
event.PreventDefault and event.stopPropagation
event.PreventDefault and return false

Answer 2

您也可以直接在onclick属性中编写event.stopPropagation（）。

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

通过html＆＃34; onclick＆＃34;停止传播。事件和JS

2 个答案: